atomWithCompare
atomWithCompare
creates atom that triggers updates when custom compare functionareEqual(prev, next)
is false.
This can help you avoid unwanted re-renders by ignoring state changes that don't matter to your application.
Note: Jotai uses Object.is
internally to compare values when changes occur. If areEqual(a, b)
returns false, but Object.is(a, b)
returns true, Jotai will not trigger an update.
import { atomWithReducer } from 'jotai/utils'export function atomWithCompare<Value>(initialValue: Value,areEqual: (prev: Value, next: Value) => boolean,) {return atomWithReducer(initialValue, (prev: Value, next: Value) => {if (areEqual(prev, next)) {return prev}return next})}
Here's how you'd use it to make an atom that ignores updates that are shallow-equal:
import { atomWithCompare } from 'XXX'import { shallowEquals } from 'YYY'import { CSSProperties } from 'react'const styleAtom = atomWithCompare<CSSProperties>({ backgroundColor: 'blue' },shallowEquals,)
In a component:
const StylePreview = () => {const [styles, setStyles] = useAtom(styleAtom)return (<div><div styles={styles}>Style preview</div>{/* Clicking this button twice will only trigger one render */}<button onClick={() => setStyles({ ...styles, backgroundColor: 'red' })}>Set background to red</button>{/* Clicking this button twice will only trigger one render */}<button onClick={() => setStyles({ ...styles, fontSize: 32 })}>Enlarge font</button></div>)}