Skip to main content

useAtomInstance

import { useAtomInstance } from '@zedux/react'

A React hook that accepts an atom template and its params and registers a static graph dependency on the resolved atom instance. Returns the resolved atom instance object.

Since the dependency is static, the component that uses this hook will not rerender when the resolved atom instance's state changes.

To make the dependency dynamic, pass the returned atom instance to a dynamic hook like useAtomValue(), useAtomState(), or useAtomSelector().

You can also pass an atom instance directly to register a static graph dependency on instances received from other sources, e.g. from useAtomContext(). You typically won't need to do this.

Examples​

Live Sandbox
123456789101112131415161718
const secondsAtom = atom('seconds', () => {
const store = injectStore(0)

injectEffect(() => {
const intervalId = setInterval(() => store.setState(val => val + 1), 1000)

return () => clearInterval(intervalId)
}, [])

return store
})

function Seconds() {
const instance = useAtomInstance(secondsAtom) // create a static dependency
const state = useAtomValue(instance) // make the dependency dynamic

return <div>Seconds: {state}</div>
}

Miscellaneous:

const instance = useAtomInstance(myAtom)
const withParams = useAtomInstance(myAtom, ['param 1', 'param 2'])

// the instance can be provided over React context:
<AtomProvider instance={instance}>
  {children}
</AtomProvider>

Signature​

useAtomInstance = (atomOrInstance, params?, config?) => atomInstance
atom

Required. An atom template or atom instance.

If an atom template is passed, you must also pass any required params of the atom.

If an atom instance is passed, the params are ignored. In this case, useAtomInstance() returns the passed instance as-is.

In all cases, useAtomInstance() registers a static dependency on the resolved instance.

params

Required if the passed atom template takes required params. Optional if not.

Don't pass this or pass an empty array if the atom does not take params or if passing an atom instance.

config

Optional. An object containing the following optional properties:

{ operation, subscribe, suspend }
operation

A string. Default 'useAtomInstance'.

You usually won't need to worry about this. But passing an operation string can help with debugging e.g. if the instance throws an error.

subscribe

A boolean. Default false.

Whether to subscribe to state updates in the resolved atom instance, triggering a rerender of the current component every time the resolved atom instance's state changes.

useAtomInstance() is "static" by default, meaning it won't subscribe to updates.

const val = useAtomInstance(
  myAtom,
  [],
  { subscribe: true }
).getState()

// the above is equivalent to:
const val = useAtomValue(myAtom)
suspend

A boolean. Default true.

Pass false to prevent React from throwing the resolved atom instance's promise, triggering React suspense. Suspense is enabled by default.

Returns

The resolved atom instance.

Uses the passed atom template + params combo to find an existing atom instance. If no instance is found, creates one using the template and params and returns it.

See Also​