colorwalf / use-force-update

React Hook to force your functional component to update.

useForceUpdate

useForceUpdate is a React Hook that forces your function component to re-render.

useForceUpdate does not serve a purpose in and of itself. It is a tiny package that aims to be integrated into larger hooks, making obsolete any class functionality that is still reliant on this.forceUpdate().

Install

• npm install use-force-update or
• yarn add use-force-update

Use

import React from 'react';
import useForceUpdate from 'use-force-update';

export default function MyButton() {
  const forceUpdate = useForceUpdate();

  const handleClick = React.useCallback(() => {
    alert('I will re-render now.');
    forceUpdate();
  }, [forceUpdate]);

  return (
    <button onClick={handleClick}>
      Re-render
    </button>
  );
};