Skip to content

quisido/use-force-update

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 11, 2023
c46cd27 · Jan 11, 2023

History

42 Commits
Nov 30, 2022
Jul 18, 2022
Jan 11, 2023
Jan 11, 2023
Jul 18, 2022
Jul 18, 2022
Jul 18, 2022
Jul 18, 2022
Jul 18, 2022
Jul 21, 2022
Jul 18, 2022
Jan 11, 2023
Oct 26, 2018
Jul 18, 2022
Jul 18, 2022
Jan 11, 2023
Jan 11, 2023
Jan 11, 2023
Jan 11, 2023
Jan 11, 2023
Jan 11, 2023

Repository files navigation

useForceUpdate

version minzipped size downloads build

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

In its simplest form, useForceUpdate re-renders a component.

import useForceUpdate from 'use-force-update';

let renderCount = 0;

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

  renderCount++;
  return (
    <>
      <p>I have rendered {renderCount} times.</p>
      <button onClick={forceUpdate}>
        Re-render
      </button>
    </>
  );
};

In its ideal form, useForceUpdate integrates with event emitters, such as state managers.

import { useEffect } from 'react';
import useForceUpdate from 'use-force-update';
import store from './store';

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

  const username = store.get('username');

  useEffect(() => {
    // When the username changes, re-render this component.
    const selector = state => state.username;
    const unsubscribe = store.subscribe(selector, forceUpdate);

    // When we unmount, stop re-rendering this component.
    return () => {
      unsubscribe();
    };
  }, [forceUpdate]);

  if (username === null) {
    return <p>You are not logged in.</p>;
  }

  return <p>Hello, {username}!</p>;
};