[](https://www.npmjs.com/package/react-forceupdate) [](https://www.npmjs.com/packag
npm install react-forceupdatebash
npm install mittt react-forceupdate
or
yarn add mittt react-forceupdate
`
Usage example
$3
`jsx
import { runForceUpdate, useForceUpdate } from 'react-forceupdate'
let nonReactive = {
something: 'waiting...',
}
let Component1 = () => {
useForceUpdate()
return {nonReactive.something}
}
let Component2 = () => {
useForceUpdate()
return {nonReactive.something}
}
function App() {
let onUpdate = () => {
// apply non-reactive changes.
nonReactive.something = 'something updated'
runForceUpdate()
}
return (
)
}
`
$3
`jsx
import { runForceUpdate, useForceUpdate } from 'react-forceupdate'
let Alpha = () => {
let { eventType, subscribedTo, payload } = useForceUpdate('alpha')
return Alpha: {payload && payload.message}
}
let Bravo = () => {
let { eventType, subscribedTo, payload } = useForceUpdate('bravo')
return Bravo: {payload && payload.message}
}
let Star = () => {
let { eventType, subscribedTo, payload } = useForceUpdate('*') // runs on any event type
return Star: {payload && payload.message}
}
function App() {
let onUpdateAlpha = () => {
const payload = { message: 'hi' }
runForceUpdate('alpha', payload)
}
let onUpdateBravo = () => {
runForceUpdate('bravo')
}
return (
)
}
`
Demo
- https://codesandbox.io/s/react-forceupdate-library-vb2x2
- https://codesandbox.io/s/react-forceupdate-pioue
API
$3
`jsx
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 component {payload.message}
}
`
$3
`jsx
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 (
)
}
``