Skip to main content


👻 Primitive and flexible state management for React
Go to Latest
---title: Opticsdescription: This doc describes Optics-ts integration.nav: 4.09keywords: optics---
## Install
You have to install `optics-ts` and `jotai-optics` to use this feature.
```npm install optics-ts jotai-optics# oryarn add optics-ts jotai-optics```
## focusAtom
`focusAtom` creates a new atom, based on the focus that you pass to it. This creates a derived atom that will focus on the specified part of the atom,and when the derived atom is updated, the derivee is notified of the update, and the equivalent update is done on the derivee.
See this:
```jsconst baseAtom = atom({ a: 5 }) // PrimitiveAtom<{a: number}>const derivedAtom = focusAtom(baseAtom, (optic) => optic.prop('a')) // PrimitiveAtom<number>```
So basically, we started with a `PrimitiveAtom<{a: number}>`, which has a getter and a setter, and then used `focusAtom` to zoom in on the `a`-property ofthe `baseAtom`, and got a `PrimitiveAtom<number>`. What is noteworthy here is that this `derivedAtom` is not only a getter, it is also a setter. If `derivedAtom` is updated, then equivalent update is done on the `baseAtom`.
The example below is simple, but it's a starting point. `focusAtom` supports many kinds of optics, including `Lens`, `Prism`, `Isomorphism`.
To see more advanced optics, please see the example at:
## Example
```jsximport { atom } from 'jotai'import { focusAtom } from 'jotai-optics'
const objectAtom = atom({ a: 5, b: 10 })const aAtom = focusAtom(objectAtom, (optic) => optic.prop('a'))const bAtom = focusAtom(objectAtom, (optic) => optic.prop('b'))
const Controls = () => { const [a, setA] = useAtom(aAtom) const [b, setB] = useAtom(bAtom) return ( <div> <span>Value of a: {a}</span> <span>Value of b: {b}</span> <button onClick={() => setA((oldA) => oldA + 1)}>Increment a</button> <button onClick={() => setB((oldB) => oldB + 1)}>Increment b</button> </div> )}```
### Codesandbox
<CodeSandbox id="nsy4u8" />