Free tools Windows power users keep installed
One-click scans. No signup required.
To refresh a React component, update the state that drives it: call a function component’s state setter or reducer dispatch, or call this.setState in a class component. React then renders the component again with its current props, state, and context. You usually do not need to reload the browser page. If you want to clear a component’s local state rather than update its display, change its key to make React recreate it.
What “refresh” means in React
A React re-render is not the same as a browser reload. A re-render lets React call a component again and update the UI from its current inputs. A browser reload restarts the page, which is ordinarily unnecessary for updating one component. React renders in response to changes it can observe, such as state updates, new props, or changed context.
As an Amazon Associate I earn from qualifying purchases.
There is no general-purpose “refresh this component” command you need to call. Instead, update the data the component uses through React’s state APIs. React’s useState documentation describes how a setter requests an update.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesUpdate state to show new data
Function components
Call the setter returned by useState from an event handler or after an operation completes. The example uses a counter to demonstrate the trigger; in an application, update the meaningful data the UI should display rather than keeping a dummy counter solely to force rendering.
#1 Best Overall
import { useState } from 'react';
function RefreshablePanel() {
const [version, setVersion] = useState(0);
function refresh() {
// Prefer updating the actual data shown by the UI.
setVersion(current => current + 1);
}
return (
<section>
<button onClick={refresh}>Refresh</button>
<p>Render version: {version}</p>
</section>
);
}The functional updater form, setVersion(current => current + 1), calculates the next value from the previous state. A setter schedules an update; it does not change the state snapshot captured by the event handler already running. If you log the state immediately after calling the setter in that handler, you will still see that handler’s snapshot. See React’s explanation of state as a snapshot.
Class components
In a class component, call this.setState to update state and request a render. Use the object or updater form that matches the change you need; do not assign directly to this.state.
class Panel extends React.Component {
state = { message: 'Ready' };
refresh = () => {
this.setState({ message: 'Updated' });
};
render() {
return <p>{this.state.message}</p>;
}
}React documents the class API in its Component reference.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Replace objects and arrays instead of mutating them
When state contains an object or array, create a new value for the next state rather than changing the existing value in place. React compares the next state with the current state using Object.is; if you pass back the same reference, React may ignore the update. For example:
// Avoid: mutates the existing object and keeps its reference.
user.name = 'Sam';
setUser(user);
// Prefer: create a new object.
setUser(current => ({ ...current, name: 'Sam' }));React’s guidance is to create a new object (or a copy) and set state to that copy. The same principle applies to arrays: create a new array with the desired changes rather than mutating the state array. See Components and Hooks must be pure.
Change a key when you want to reset a component
If the goal is to discard a component’s local state and start it over, give it a different key. React then recreates that component and its descendants from scratch. This is a reset/remount pattern, not the usual way to display updated data while preserving local state.
function Parent() {
const [formVersion, setFormVersion] = useState(0);
return (
<>
<button onClick={() => setFormVersion(v => v + 1)}>
Reset form
</button>
<Form key={formVersion} />
</>
);
}Use this deliberately for cases such as clearing a form when the user starts a new record. React explains the behavior in its useState reference.
Connect components to data outside React
If a value changes in an external store or browser API rather than React state, changing that value alone does not tell React to render. Subscribe the component to that source with useSyncExternalStore, which takes a subscription function, a snapshot getter, and optionally a server snapshot getter:
Best Value
const snapshot = useSyncExternalStore(
subscribe,
getSnapshot,
getServerSnapshot
);The subscription should notify React when the store changes, and getSnapshot should return a stable snapshot while the underlying value is unchanged. Snapshots should be immutable. For server rendering and hydration, provide a matching getServerSnapshot when needed. React recommends built-in useState and useReducer when they fit the problem. See the useSyncExternalStore reference.
Quick Recap
Why a component may not update
- No React update was requested: changing a local variable, prop, state object, or ref directly does not notify React. Call the relevant state setter or dispatch instead.
- An object or array was mutated in place: create a new object or array so the state value has a new reference.
- You checked state too soon: a handler sees the state snapshot from the render in which it was created. A setter schedules the next render but does not rewrite that existing snapshot.
- The value lives outside React: use a subscription such as
useSyncExternalStoreor the integration provided by the state library. - You are using
memo: check whether parent-provided props have changed. A memoized component can still render when its own state changes or when context it reads changes. See React’s memo reference. - You are using a ref for displayed data: changing
ref.currentdoes not trigger a render. Refs are for values that do not need to cause the UI to update. See useRef.
Choose the right mechanism
| Goal | Use | Effect |
|---|---|---|
| Show updated data owned by a function component | useState setter or useReducer dispatch |
Requests a render while preserving the component instance and its other local state. |
| Show updated data owned by a class component | this.setState |
Requests a render with the next class state. |
| Clear local state and recreate a subtree | Change the component’s key |
Remounts the component and descendants, resetting their local state. |
| Reflect changes from an external mutable source | useSyncExternalStore or the source’s React integration |
Subscribes React to changes and renders from the current snapshot. |
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.
