Can you force a React component to re-render without calling setState?
Matthew C.
—The problem
A React component re-renders when its state or props change. If your React component depends on other data outside of the component, you may need to force a re-render. The React docs recommend avoiding forced re-renders.
If you have a component that is not re-rendering as expected, the issue may be due to state or props issues that can be fixed without needing to force an update.
The solution
The solution depends on whether you are using class or function components. For class components, you can call the forceUpdate() method.
this.forceUpdate();
For functional components, you can use an incremental counter to force a re-render:
const [ignored, forceUpdate] = useReducer(x => x + 1, 0); function handleClick() { forceUpdate(); }
You can also force an update by updating a state object with an empty object:
const [state, updateState] = React.useState(); const forceUpdate = React.useCallback(() => updateState({}), []); function handleClick() { forceUpdate(); }
React uses the Object.is comparison algorithm to compare the previous state value with the new state value. Each time the forceUpdate function is called in the above code example, the state is set to a new empty object. In JavaScript, objects are compared by reference not by value. Two objects are considered equal when they both point to the same memory location. The previous state and new state objects are in different locations in memory so the component re-renders.
- Sentry BlogGuide to Error & Exception Handling in React
- Sentry BlogHow to identify fetch waterfalls in React
- Syntax.fmReact Server Components
- Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
- Syntax.fmWhy the jQuery Creator Uses React and Typescript
- Syntax.fmListen to the Syntax Podcast
- Sentry BlogReact Native Debugging and Error Tracking During App Development
- Syntax.fmDiscussion on building native iOS and Android apps with React Native
- SentryReact Error & Performance Monitoring
- Sentry BlogFixing memoization-breaking re-renders in React
- SentryReact Debug Hub
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.