react-forceupdate

About

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

Install

npm install mittt react-forceupdate

# or
# yarn add mittt react-forceupdate

Usage example

Basic

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

let nonReactive = {
  something: 'waiting...',
}

let Component1 = () => {
  useForceUpdate()
  return <div> {nonReactive.something} </div>
}

let Component2 = () => {
  useForceUpdate()
  return <div> {nonReactive.something} </div>
}

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

    runForceUpdate()
  }

  return (
    <main>
      <button onClick={onUpdate}>Force update</button>
      <DeeplyNestedComponentContainingComponent1 />
      <DeeplyNestedComponentContainingComponent2 />
    </main>
  )
}

With eventType or payload

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

let Alpha = () => {
  let { eventType, subscribedTo, payload } = useForceUpdate('alpha')
  return <div>Alpha: {payload && payload.message}</div>
}

let Bravo = () => {
  let { eventType, subscribedTo, payload } = useForceUpdate('bravo')
  return <div>Bravo: {payload && payload.message}</div>
}

let Star = () => {
  let { eventType, subscribedTo, payload } = useForceUpdate('*') // runs on any event type
  return <div>Star: {payload && payload.message}</div>
}

function App() {
  let onUpdateAlpha = () => {
    const payload = { message: 'hi' }
    runForceUpdate('alpha', payload)
  }

  let onUpdateBravo = () => {
    runForceUpdate('bravo')
  }

  return (
    <main>
      <button onClick={onUpdateAlpha}>Force update alpha</button>
      <button onClick={onUpdateBravo}>Force update bravo</button>

      <DeeplyNestedComponentContainingAlpha />
      <DeeplyNestedComponentContainingBravo />
      <DeeplyNestedComponentContainingStar />
    </main>
  )
}

Demo

• https://codesandbox.io/s/react-forceupdate-library-vb2x2
• https://codesandbox.io/s/react-forceupdate-pioue

API

useForceUpdate

import { useForceUpdate } from 'react-forceupdate'

function ReceiverComponent() {
  // re-render this component on 'default' event
  useForceUpdate() // same as useForceUpdate('default')

  // re-render this component on this event
  useForceUpdate('alpha')

  // re-render this component on this event with received payload
  let { payload } = useForceUpdate('bravo')

  return <div>component {payload.message}</div>
}

runForceUpdate

import { runForceUpdate } from 'react-forceupdate'

function SenderComponent() {
  let onUpdate = () => {
    runForceUpdate() // same as runForceUpdate('default')
  }
  let onAlphaUpdate = () => {
    runForceUpdate('alpha')
  }
  let onBravoUpdate = () => {
    runForceUpdate('bravo', { message: 'hi' })
  }

  return (
    <div>
      <button onClick={onUpdate}>re-render receiver components</button>

      <button onClick={onAlphaUpdate}>
        re-render alpha receiver components
      </button>

      <button onClick={onBravoUpdate}>
        re-render bravo receiver components with provided payload
      </button>
    </div>
  )
}