react-forceupdate

react-forceupdate

About

React hooks for force updating components. Force update from anywhere to those using a useForceUpdate hook.

Dependency

mitt: tiny library ~270 byte gzipped. https://bundlephobia.com/result?p=mitt

Install

npm install mitt
npm install react-forceupdate

# or
# yarn add mitt
# yarn add react-forceupdate

Usage example

Basic

import { runForceUpdate, useForceUpdate } from 'react-forceupdate'

let nonReactive = {
  something: '',
}

let Lorem = () => {
  useForceUpdate() // re-render on runForceUpdate event.

  return <div> {nonReactive.something} </div>
}

let Ipsum = () => {
  useForceUpdate() // re-render on runForceUpdate event.

  return <div> {nonReactive.something} </div>
}

function App() {
  let onForceUpdate = () => {
    // apply non-reactive changes.
    nonReactive.something = 'something updated'

    // force update those who uses useForceUpdate hook.
    runForceUpdate()
  }

  return (
    <main>
      <button onClick={onForceUpdate}>Force update</button>
      <DeeplyNestedComponentContainingLorem />
      <DeeplyNestedComponentContainingIpsum />
    </main>
  )
}

With type

import { runForceUpdate, useForceUpdate } from 'react-forceupdate'

let Lorem = () => {
  let data = useForceUpdate({ type: 'lorem' }) // re-render on runForceUpdate event.

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

let Ipsum = () => {
  let data = useForceUpdate({ type: 'ipsum' }) // re-render on runForceUpdate event.

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

let CatchAll = () => {
  let data = useForceUpdate({ type: '*' }) // re-render on runForceUpdate event.

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

function App() {
  let onForceUpdateLorem = () => {
    // force update those who uses useForceUpdate hook with given type.
    runForceUpdate({ type: 'lorem', payload: 'hi' })
  }

  let onForceUpdateIpsum = () => {
    // force update those who uses useForceUpdate hook with given type.
    runForceUpdate({ type: 'ipsum' })
  }

  let onForceUpdateLoremIpsum = () => {
    // force update those who uses useForceUpdate hook with given type.
    runForceUpdate([
      { type: 'lorem', payload: { value: 1 } },
      { type: 'ipsum', payload: 'hello' },
      { payload: 'howdy' }, // default type
    ])
  }

  return (
    <main>
      <button onClick={onForceUpdateLorem}>Force update lorem</button>
      <button onClick={onForceUpdateIpsum}>Force update ipsum</button>
      <button onClick={onForceUpdateLoremIpsum}>
        Force update lorem and ipsum
      </button>
      <DeeplyNestedComponentContainingLorem />
      <DeeplyNestedComponentContainingIpsum />
      <DeeplyNestedComponentContainingCatchAll />
    </main>
  )
}

Demo

https://codesandbox.io/s/react-forceupdate-pioue?file=/src/App.js