This is unreleased documentation for Yew Next version.
For up-to-date documentation, see the latest version on

Function yew::functional::use_force_update

source ·
pub fn use_force_update() -> impl Hook<Output = UseForceUpdateHandle>
Expand description

This hook is used to manually force a function component to re-render.


Often, using this hook means that you’re doing something wrong. Try to use more specialized hooks, such as use_state and use_reducer. This hook should only be used when your component depends on external state where you can’t subscribe to changes, or as a low-level primitive to enable such a subscription-based approach.


Use this hook when wrapping an API that doesn’t expose precise subscription events for fetched data. You could then, at some point, invalidate your local cache of the fetched data and trigger a re-render to let the normal render flow of components tell you again which data to fetch, and repopulate the cache accordingly.

A large externally managed cache, such as a app-wide cache for GraphQL data should not rerender every component whenever new data arrives, but only those where a query changed.

If the state of your component is not shared, you should need to use this hook.


This example implements a silly, manually updated display of the current time. The component is re-rendered every time the button is clicked. You should usually use a timeout and use_state to automatically trigger a re-render every second without having to use this hook.

use yew::prelude::*;

fn ManuallyUpdatedDate() -> Html {
    let trigger = use_force_update();
    let onclick = use_state(move || Callback::from(move |_| trigger.force_update()));
    let last_update = js_sys::Date::new_0().to_utc_string();
    html! {
            <button onclick={&*onclick}>{"Update now!"}</button>
            <p>{"Last updated: "}{last_update}</p>