Итоги

В этом уроке вы узнали, что:

• Реф создаётся через useRef(null) и передаётся элементу как ref={inputRef}. Когда элемент оказывается на странице, React кладёт его в inputRef.current, и обработчики и эффекты могут вызывать его методы, например inputRef.current.focus().
• Реф может хранить любое значение от одной отрисовки к другой, а изменение ref.current не вызывает новую отрисовку. Это место для того, что нужно только вашему коду, например для id интервала. То, что показывает страница, должно лежать в состоянии.
• Ваш собственный хук — это функция, имя которой начинается с use и которая вызывает другие хуки. Он делится между компонентами кодом, а не состоянием: у каждого компонента, который его вызывает, оно своё. Хук без JSX лежит в файле .js.
• useLocalStorage(key, initialValue) работает как useState и запоминает значение в localStorage. useFetch(url) загружает файл и возвращает { data, loading, error }.
• Правила хуков: вызывайте их только на верхнем уровне компонентов и хуков, никогда в условиях, циклах и обработчиках, и всегда в одном и том же порядке. Ранний возврат делайте только после всех хуков.

В следующем уроке, «Итоговый проект», вы примените весь курс в приложении с карточками для заучивания слов и узнаете, как создавать приложения на React на своём компьютере.

Но сначала немного практики: билет на фестиваль с вашим именем, которое приложение запоминает, и кнопка, которая ставит курсор в поле имени. useLocalStorage.js — хук, который вы написали, он готов к использованию.