In a function component, update the React state that drives the UI—using a useState setter or useReducer dispatch. For data held outside React, subscribe with useSyncExternalStore. Class components also have this.forceUpdate(), but it is an uncommon escape hatch, not the usual fix for stale UI.
How React decides to render again
A component renders from its current props, state, and context. A state update, changed props from a parent, or a changed context value can lead React to render it again. If the screen is stale, first find where the displayed value comes from and connect changes in that source to React; an unrelated render trigger can hide the underlying data-flow problem.
React can skip a state update when the next value is Object.is-equal to the current one. For objects and arrays, avoid mutating the existing value and passing the same reference back. Instead, create and set a new value that represents the change. See the official useState reference.
Trigger an update in a function component
Use useState for local UI data
Call the setter when the value changes. If the next value depends on the previous one, use the functional form:
#1 Best Overall
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(previousCount => previousCount + 1);
}
return <button onClick={increment}>Count: {count}</button>;
}React schedules rendering from the updated state. Make sure the JSX actually reads the state you update; changing a value that the rendered expression does not use will not fix stale output.
Use useReducer when updates are actions
Dispatch an action that changes the state used by the component, and have the reducer return the intended next state. Dispatching an action that leaves state unchanged is not a substitute for identifying the value the UI needs.
Update when data lives outside React
A mutable external store or browser API does not automatically notify a component just because its data changed. Connect it with useSyncExternalStore(subscribe, getSnapshot). The subscription registers a change callback and returns cleanup; the snapshot function reads the relevant data. When the callback signals a change and the snapshot differs, React can render with the new value. Follow the useSyncExternalStore reference for the API contract.
Keep the snapshot stable while the underlying data is unchanged, and return an immutable or cached value when it changes. If the subscription callback does not run, or the snapshot keeps returning the same value despite a change, the component has no reliable update signal.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →What about class components?
A class component can call this.forceUpdate() to request a render without consulting shouldComponentUpdate. React’s Component reference describes it as: “Forces a component to re-render.” Use it only for unusual imperative cases after checking whether the relevant change belongs in state, props, or context. If shouldComponentUpdate returns false, forceUpdate() bypasses that check; it does not make an incorrectly wired data source reactive.
Common attempted fixes that do not trigger the right update
- Changing a ref: A ref is for mutable values that do not need to affect rendered output. Updating
ref.currentdoes not itself schedule a render. If the value must appear in the UI, use state or a proper external-store subscription. - Adding
useEffectoruseMemo: Neither is a general-purpose render trigger. Effects are for side effects, while memoization is for avoiding repeated calculations; neither replaces updating the data the component renders. - Removing
memoautomatically:memois a performance optimization that can skip rendering when props are unchanged; it is not an update mechanism. Check which props, state, context, or store snapshot actually changed before changing memoization. See React’s memo reference. - Mutating data during render: Rendering must stay pure. React may render more than once or discard render work, so do not mutate globals, subscribe, or perform other side effects during rendering. Put side effects in event handlers or Effects as appropriate. See Components and Hooks must be pure.
Diagnose a component that is not updating
- Identify the source of the displayed value: local state, props, context, or an external store.
- Verify that the state setter or reducer dispatch runs, and that the rendered expression reads the updated value.
- If setting an object or array, create a new value rather than mutating the existing one and passing back the same reference.
- For an external store, confirm that its subscription callback runs and that
getSnapshotreturns a stable value while unchanged and a changed immutable or cached value when the data changes. - If props are unchanged, check whether
memois skipping work; in a class component, inspect whethershouldComponentUpdatereturnsfalse.
Strict Mode may invoke rendering more than once in development, and React may discard render work. Code that only appears correct when render happens exactly once is not a safe fix.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When you need the DOM updated before reading it
If the data is already updated correctly but code must read the DOM immediately afterward, that is a timing issue rather than a missing render trigger. The useState reference mentions flushSync for rare DOM-access cases. It is not a general solution for making React notice mutations; fix the state update or subscription when the UI does not reflect changed data.
useSyncExternalStore was introduced in the React 18 release, announced on 2022-03-29. That release announcement is historical context, not evidence of which React version a particular project currently has installed: React v18.0 announcement.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
