How to Force Rerender With Hooks in React

You can force re-renders of your components in React with a custom hook that uses the built-in useState hook:

The following hook should only be used in exceptional cases. Only re-render your component when state changes.

import React, { useState } from 'react'

// Create a custom useForceUpdate hook with useState
const useForceUpdate = () => useState()[1];

// Call it inside your component
const Hooks = () => {
  const forceUpdate = useForceUpdate();

  return (
    <button onClick={forceUpdate}>
      Update me
    </button>
  );
};
useForceUpdate.js
Copied to clipboard!

The example above is equivalent to the functionality of the forceUpdate method in class-based components. This hook works in the following way:

Remove ads

If you would like to see it in action, give it a try on Codesandbox

Try the hook on codesandbox
How to Force Rerender With Hooks in React
If you would like to see more Webtips, follow @flowforfrank

If you are interested in reading more about React hooks, see more examples for custom hooks or just learn about the basics, make sure to check out the article below.

All You Need to Know About React Hooks
Remove ads
Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.