Atoms lezen en schrijven met useAtom

useAtom(someAtom) geeft [value, setter] terug, naar het voorbeeld van de API van useState. De value is de huidige status van de atom; de setter werkt deze bij. Gebruik dit wanneer een component de atom zowel leest als schrijft.

De setter accepteert een nieuwe waarde of een updaterfunctie: setCount(c => c + 1).

useAtomValue(someAtom) geeft alleen de huidige waarde terug, zonder setter. Gebruik dit in componenten die alleen waarden weergeven en de status nooit aanpassen.

Omdat de component geen verwijzing naar een setter bevat, is de bedoeling duidelijk in de code vastgelegd: deze component leest alleen.

useSetAtom(someAtom) geeft alleen de setterfunctie terug. Belangrijk is dat de component hierdoor geen abonnement op de waarde van de atom krijgt. De component rendert nooit opnieuw wanneer de atom verandert.

Gebruik dit voor componenten die alleen acties uitvoeren, zoals knoppen die statuswijzigingen verzenden maar geen afgeleide UI weergeven.

Een component die useSetAtom(countAtom) aanroept om een teller te verhogen, rendert nooit opnieuw wanneer countAtom verandert, omdat de component geen abonnement op de waarde heeft. Alleen de component die de teller weergeeft, rendert opnieuw.

Dit is een eenvoudige maar krachtige optimalisatie: koppel schrijvers los van lezers om kettingreacties van opnieuw renderen te voorkomen.

Importeer atomWithStorage uit jotai/utils. Gebruik deze precies zoals atom(), maar geef een opslagsleutel als eerste argument door: atomWithStorage('theme', 'light'). De atom wordt automatisch gesynchroniseerd met localStorage.

Bij het opnieuw laden van de pagina hydrateert de atom vanuit localStorage. Alle componenten die de atom lezen, nemen de bewaarde waarde direct over.

Je kunt het symbool RESET uit jotai/utils doorgeven aan de setter van een atomWithStorage-atom: setter(RESET). Hiermee wordt het item in localStorage gewist en wordt de atom teruggezet naar de beginwaarde.

Dit is handig voor uitlogprocessen of knoppen voor "terugzetten naar standaardwaarden" op instellingenpagina's.

atomFamily uit jotai/utils maakt een fabriek die een atom met een parameter teruggeeft. Zo maakt atomFamily(id => atom(null)) bijvoorbeeld een afzonderlijke atom voor elke unieke doorgegeven id.

Dit is ideaal voor status per item, zoals selectedAtom(itemId) of expandedAtom(rowId), zonder dat je één grote map-atom hoeft te beheren.

Atomfamilies kunnen onbeperkt groeien als ids zich blijven opstapelen. Gebruik atomFamily.setShouldRemove((createdAt, param) => ...) om een opruimpredicaat te definiëren dat Jotai aanroept wanneer wordt bepaald welke verouderde familieleden moeten worden verwijderd.

Ruim bij lijsten waarin items worden toegevoegd en verwijderd altijd de items van de atomfamilie op wanneer items worden verwijderd, om geheugenlekken te voorkomen.

Het pakket jotai-devtools biedt een visueel paneel met alle actieve atoms en hun huidige waarden. Installeer het pakket, omhul je app met DevTools en bekijk de atomstatus in realtime.

Elke update van een atom wordt geregistreerd met de vorige en volgende waarde, waardoor het eenvoudig wordt om complexe interacties tussen atoms te debuggen.

In een grote lijst kan een ListContainer-component useSetAtom(selectedIdAtom) gebruiken om de selectie bij te werken zonder zich op selectedIdAtom te abonneren. Alleen de afzonderlijke ListItem-componenten die useAtomValue(selectedIdAtom) aanroepen, renderen opnieuw wanneer de selectie verandert.

Dit patroon schaalt goed: duizenden lijstitems toevoegen vertraagt updates van de selectie niet.

Kies de hook die bij de behoefte van je component past: useAtomValue voor uitsluitend weergeven, useSetAtom voor uitsluitend acties en useAtom wanneer je beide nodig hebt. Door dit doelbewuste API-ontwerp is de verantwoordelijkheid van een component direct duidelijk.

Een component voor een formulierveld gebruikt meestal useAtom; een verzendknop gebruikt useSetAtom; een label dat een teller weergeeft, gebruikt useAtomValue.

useAtom geeft zowel de waarde als de setter; useAtomValue geeft alleen de waarde terug en maakt een leesabonnement; useSetAtom geeft alleen de setter terug en veroorzaakt geen opnieuw renderen wanneer de waarde verandert. atomWithStorage bewaart de status in localStorage en ondersteunt RESET, terwijl atomFamily atoms per parameter maakt voor dynamische lijsten.

Door de juiste hook te kiezen, beperk je onnodig opnieuw renderen en maak je de bedoeling van een component expliciet.