https://github.com/quisido/use-force-update

React Hook to force your function component to update
https://github.com/quisido/use-force-update

hook javascript npm npmjs react react-hooks reactjs typescript

Last synced: about 1 month ago
JSON representation

React Hook to force your function component to update

• Host: GitHub
• URL: https://github.com/quisido/use-force-update
• Owner: quisido
• License: mit
• Created: 2018-10-26T17:05:46.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-11T18:28:42.000Z (almost 2 years ago)
• Last Synced: 2024-05-10T18:58:12.377Z (6 months ago)
• Topics: hook, javascript, npm, npmjs, react, react-hooks, reactjs, typescript
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/use-force-update
• Size: 2.58 MB
• Stars: 182
• Watchers: 5
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# useForceUpdate

[![version](https://img.shields.io/npm/v/use-force-update.svg)](https://www.npmjs.com/package/use-force-update)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/use-force-update.svg)](https://www.npmjs.com/package/use-force-update)

[![downloads](https://img.shields.io/npm/dt/use-force-update.svg)](https://www.npmjs.com/package/use-force-update)

[![build](https://github.com/CharlesStover/use-force-update/actions/workflows/use-force-update.yml/badge.svg?branch=main&event=push)](https://github.com/CharlesStover/use-force-update/actions/workflows/use-force-update.yml)

`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.

```jsx

import useForceUpdate from 'use-force-update';

let renderCount = 0;

export default function MyButton() {

  const forceUpdate = useForceUpdate();

  renderCount++;

  return (

    <>

      
I have rendered {renderCount} times.

      

        Re-render

      

    >

  );

};

```


In its ideal form, `useForceUpdate` integrates with event emitters, such as

state managers.

```jsx

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 
You are not logged in.
;

  }


  return 
Hello, {username}!
;

};

```