docs/recipes/custom-useatom-hooks.mdx
This page shows the ways of creating different utility functions. Utility functions save your time on coding, and you can preserve your base atom for other usage.
import { useAtomValue } from 'jotai'
import { selectAtom } from 'jotai/utils'
export function useSelectAtom(anAtom, selector) {
const selectorAtom = selectAtom(
anAtom,
selector,
// Alternatively, you can customize `equalityFn` to determine when it will rerender
// Check selectAtom's signature for details.
)
return useAtomValue(selectorAtom)
}
// how to use it
function useN(n) {
const selector = useCallback((v) => v[n], [n])
return useSelectAtom(arrayAtom, selector)
}
Please note that in this case keyFn must be stable, either define outside render or wrap with useCallback.
import { useAtom } from 'jotai'
import { freezeAtom } from 'jotai/utils'
export function useFreezeAtom(anAtom) {
return useAtom(freezeAtom(anAtom))
}
import { useAtom } from 'jotai'
import { splitAtom } from 'jotai/utils'
export function useSplitAtom(anAtom) {
return useAtom(splitAtom(anAtom))
}
import { useAtom } from 'jotai'
import { focusAtom } from 'jotai-optics'
/* if an atom is created here, please use `useMemo(() => atom(initValue), [initValue])` instead. */
export function useFocusAtom(anAtom, keyFn) {
return useAtom(focusAtom(anAtom, keyFn))
}
// how to use it
useFocusAtom(anAtom) {
useMemo(() => atom(initValue), [initValue]),
useCallback((optic) => optic.prop('key'), [])
}
Please note that in this case keyFn must be stable, either define outside render or wrap with useCallback.