Zusammenfassung

In dieser Lektion hast du gelernt:

• Ein Ref erzeugst du mit useRef(null) und gibst es einem Element mit ref={inputRef}. Sobald das Element auf der Seite ist, legt React es in inputRef.current, sodass Handler und Effekte seine Methoden aufrufen können, etwa inputRef.current.focus().
• Ein Ref kann jeden Wert von einem Rendern zum nächsten behalten, und eine Änderung von ref.current rendert nicht neu. Dort gehört alles hin, was nur dein Code braucht, etwa die ID eines Intervalls. Was die Seite zeigt, gehört in den State.
• Dein eigener Hook ist eine Funktion, deren Name mit use beginnt und die andere Hooks aufruft. Er teilt Code zwischen Komponenten, keinen State: Jede Komponente, die ihn aufruft, bekommt ihren eigenen. Ein Hook ohne JSX steht in einer .js-Datei.
• useLocalStorage(schluessel, startwert) funktioniert wie useState und merkt sich den Wert in localStorage. useFetch(url) lädt eine Datei und gibt { daten, laedt, fehler } zurück.
• Die Regeln für Hooks: Rufe sie nur auf der obersten Ebene von Komponenten und Hooks auf, nie in Bedingungen, Schleifen oder Handlern, und immer in derselben Reihenfolge. Kehre erst nach allen Hooks vorzeitig zurück.

In der nächsten Lektion, dem Abschlussprojekt, setzt du den ganzen Kurs in einer Karteikarten-App zum Wörterlernen ein, und du siehst, wie du React-Apps auf deinem eigenen Computer baust.

Vorher aber noch eine kleine Übung: ein Festival-Ticket mit deinem Namen, den sich die App merkt, und ein Button, der den Cursor ins Namensfeld setzt. useLocalStorage.js ist der Hook, den du geschrieben hast, und liegt bereit.