Atoms mit useAtom lesen und schreiben

useAtom(someAtom) gibt [value, setter] zurück und bildet damit die useState-API nach. value enthält den aktuellen Atom-Zustand, setter aktualisiert ihn. Verwenden Sie diesen Hook, wenn eine Komponente das Atom sowohl liest als auch schreibt.

Der Setter akzeptiert entweder einen neuen Wert oder eine Aktualisierungsfunktion: setCount(c => c + 1).

useAtomValue(someAtom) gibt nur den aktuellen Wert zurück, ohne Setter. Verwenden Sie diesen Hook in reinen Anzeige-Komponenten, die den Zustand lesen, aber niemals ändern.

Da die Komponente keine Setter-Referenz enthält, ist die Absicht im Code eindeutig dokumentiert: Diese Komponente liest ausschließlich Werte.

useSetAtom(someAtom) gibt nur die Setter-Funktion zurück. Entscheidend ist, dass dieser Hook die Komponente nicht für den Wert des Atoms registriert. Die Komponente wird niemals erneut gerendert, wenn sich das Atom ändert.

Verwenden Sie diesen Hook für aktionsorientierte Komponenten wie Schaltflächen, die Zustandsänderungen auslösen, aber keine abgeleitete UI anzeigen.

Eine Komponente, die useSetAtom(countAtom) aufruft, um einen Zähler zu erhöhen, wird niemals erneut gerendert, wenn sich countAtom ändert, da sie kein Wertabonnement besitzt. Nur die Komponente, die den Zähler anzeigt, wird erneut gerendert.

Das ist eine einfache, aber wirkungsvolle Optimierung: Entkoppeln Sie Schreib- und Lesezugriffe, um kaskadierende erneute Renderings zu verhindern.

Importieren Sie atomWithStorage aus jotai/utils. Verwenden Sie es genauso wie atom(), übergeben Sie aber als erstes Argument einen Storage-Schlüssel: atomWithStorage('theme', 'light'). Das Atom synchronisiert sich automatisch mit localStorage.

Beim Neuladen der Seite wird das Atom aus localStorage hydratisiert. Alle Komponenten, die das Atom lesen, übernehmen sofort den gespeicherten Wert.

Das RESET-Symbol aus jotai/utils kann an den Setter eines atomWithStorage-Atoms übergeben werden: setter(RESET). Dadurch wird der Eintrag in localStorage gelöscht und das Atom auf seinen Anfangswert zurückgesetzt.

Das ist nützlich für Abmeldevorgänge oder Schaltflächen zum Zurücksetzen auf die Standardwerte in Einstellungsseiten.

atomFamily aus jotai/utils erstellt eine Factory, die ein parametrisiertes Atom zurückgibt. Beispielsweise erstellt atomFamily(id => atom(null)) für jede übergebene eindeutige ID ein eigenes Atom.

Das ist ideal für zustandsbezogene Einzelwerte wie selectedAtom(itemId) oder expandedAtom(rowId), ohne ein einzelnes großes Map-Atom verwalten zu müssen.

Atomfamilien können unbegrenzt wachsen, wenn sich IDs ansammeln. Verwenden Sie atomFamily.setShouldRemove((createdAt, param) => ...), um ein Bereinigungsprädikat festzulegen, das Jotai bei der Entscheidung zum Entfernen veralteter Familienmitglieder aufruft.

Bereinigen Sie bei Listen, in denen Elemente hinzugefügt und entfernt werden, die Einträge der Atomfamilie immer, wenn Elemente gelöscht werden, um Speicherlecks zu vermeiden.

Das Paket jotai-devtools stellt ein visuelles Panel bereit, in dem alle aktiven Atome und ihre aktuellen Werte aufgelistet werden. Installieren Sie es, umschließen Sie Ihre App mit DevTools und untersuchen Sie den Atom-Zustand in Echtzeit.

Jede Aktualisierung eines Atoms wird zusammen mit dem vorherigen und dem nächsten Wert protokolliert, wodurch sich komplexe Atom-Interaktionen unkompliziert debuggen lassen.

In einer großen Liste kann eine ListContainer-Komponente useSetAtom(selectedIdAtom) verwenden, um die Auswahl zu aktualisieren, ohne selectedIdAtom zu abonnieren. Nur die einzelnen ListItem-Komponenten, die useAtomValue(selectedIdAtom) aufrufen, werden bei einer Änderung der Auswahl erneut gerendert.

Dieses Muster skaliert gut: Auch das Hinzufügen von Tausenden Listenelementen verlangsamt die Aktualisierung der Auswahl nicht.

Wählen Sie den Hook, der zum Bedarf Ihrer Komponente passt: useAtomValue für reine Anzeige, useSetAtom für reine Aktionen und useAtom, wenn beides erforderlich ist. Durch dieses bewusste API-Design wird die Verantwortung einer Komponente auf einen Blick deutlich.

Eine Formularfeld-Komponente verwendet typischerweise useAtom, eine Senden-Schaltfläche useSetAtom und ein Label, das einen Zähler anzeigt, useAtomValue.

Was ist der entscheidende Vorteil von useSetAtom gegenüber useAtom?

useAtom liefert sowohl den Wert als auch den Setter; useAtomValue liefert nur den Wert und registriert ein Leseabonnement; useSetAtom liefert nur den Setter und löst bei einer Wertänderung kein erneutes Rendern aus. atomWithStorage speichert Werte in localStorage und unterstützt RESET. atomFamily erstellt für jeden Parameter eigene Atome für dynamische Listen.

Die Wahl des passenden Hooks minimiert unnötige erneute Renderings und macht die Absicht einer Komponente eindeutig.