import { AtomCounter } from '@/components/mdx/AtomCounter' import { DynamicAtomFamilyCounters } from '@/components/mdx/DynamicAtomFamilyCounters' ## Shared Atoms Check out this `Counter` component ↓ Here's (a simplified version of) the code ↓ ```tsx import { Atom, useAtom } from '@effect-atom/atom-react' const countAtom = Atom.make(0) export function Counter() { const [count, setCount] = useAtom(countAtom) return (

{count}

) } ``` Now, let's see what happens if we have multiple counters on the same page. ```tsx import { Counter } from './Counter'

``` As you can see, the counters are not independent. This is because they're using the same `countAtom`. ## The Solution: Atom.family To create multiple independent counters, we need to use `Atom.family`. This allows us to create a set of identifiable atoms, ensuring we get a stable reference for each key. ```tsx import { Atom, useAtom } from '@effect-atom/atom-react' // Create a family of counter atoms, each identified by a number. const counterFamily = Atom.family((id: number) => Atom.make(0) ) export function FamilyCounter({ id }: { id: number }) { // Call the counterFamily with the id to get the atom const [count, setCount] = useAtom(counterFamily(id)) return (

Counter #{id}

{count}

) } ``` Now when we render multiple counters with different IDs, they maintain independent state. ```tsx

``` Now, just for fun, here's Counter 3 again! ↓ ```tsx ``` Calling the family function with the same ID will return the same atom.

Understanding Atom.family