The idea is to sync two Jotai atoms by basically making writing to synced atom to write to original atom.

Definitions

• source atom - atom that is declared/used higher in React tree
• target atom - atom that should be synced with source atom meaning that writing to it will write the same value to the source atom

Backwards should work too. Writing to source atom should change value in target atom

Rules

• If the atom is not synced writing to it means writing to original atom
• If the atom is target atom then writing operation writes to associated source atom
• If the atom is source atom then writing operation writes to the atom and target atom is updated automatically because target atom is basically the reference to source atom

Usage

1import { atom, useAtom } from 'jotai';
2import { SyncScopeProvider } from 'jotai-sync-scope';
3
4const sourceAtom = atom(0);
5const targetAtom = atom(0);
6
7const App = () => {
8  const [state] = useAtom(sourceAtom);
9
10  return (
11    <>
12      <p>Source: {state}</p>
13      <Sync />
14    </>
15  );
16};
17
18const Sync = (props) => {
19  return (
20    <SyncScopeProvider atoms={[[sourceAtom, targetAtom]]}>
21      <Component />
22    </SyncScopeProvider>
23  );
24};
25
26const Component = () => {
27  const [state, setState] = useAtom(targetAtom);
28
29  return (
30    <>
31      <p>Target: {state}</p>
32      <button onClick={() => setState((s) => s + 1)}>+1</button>
33    </>
34  );
35};

Use case

One of the use cases is when you have atom with array of items and you want to provide a way to consume item within scope of some components using splitAtom and hook to the item like it's global.

1import { atom, useAtom, useAtomValue, atom } from 'jotai';
2import { splitAtom } from 'jotai/utils';
3import { SyncScopeProvider } from 'jotai-sync-scope';
4
5const tabsAtom = atom([]);
6const tabAtomsAtom = splitAtom(tabsAtom);
7
8const App = () => {
9  const tabAtoms = useAtomValue(tabAtomsAtom);
10
11  return (
12    <>
13      {tabAtoms.map((atom) => (
14        <SyncScopeProvider atoms={[[atom, tabAtom]]} key={atom.key}>
15          <Tab />
16        </SyncScopeProvider>
17      ))}
18    </>
19  );
20};
21
22const tabAtom = atom({});
23
24const Tab = () => {
25  const [tab, setTab] = useAtom(tabAtom);
26
27  // You can update tabAtom value as if it's global but it's actually relates to an item from tabsAtom.
28};
29
30// You can even derive some state from tabAtom and use it to access some part of it
31const tabName = atom((get) => get(tabAtom).title);