---
title: Custom useAtom hooks
nav: 9.02
keywords: custom,hook
---

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.

### utils

#### useSelectAtom

```js
import { useAtomValue } from 'jotai'
import { selectAtom } from 'jotai/utils'

/* if an atom is created here, please use `useMemo(() => atom(initValue), [initValue])` instead. */
export function useSelectAtom(anAtom, keyFn) {
  return useAtomValue(selectAtom(anAtom, keyFn))
}

// how to use it
useSelectAtom(
  useMemo(() => atom(initValue), [initValue]),
  useCallback((state) => state.prop, []),
)
```

Please note that in this case `keyFn` must be stable, either define outside render or wrap with `useCallback`.

#### useFreezeAtom

```js
import { useAtom } from 'jotai'
import { freezeAtom } from 'jotai/utils'

export function useFreezeAtom(anAtom) {
  return useAtom(freezeAtom(anAtom))
}
```

#### useSplitAtom

```js
import { useAtom } from 'jotai'
import { splitAtom } from 'jotai/utils'

export function useSplitAtom(anAtom) {
  return useAtom(splitAtom(anAtom))
}
```

### extensions

#### useFocusAtom

```js
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'), [])
}
```

#### Stackblitz

<Stackblitz id="vitejs-vite-ge1mah" file="src%2FApp.tsx" />

Please note that in this case `keyFn` must be stable, either define outside render or wrap with `useCallback`.
