Хуки — це новинка в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класу.
\nЦя сторінка описує API для вбудованих у React хуків.
\nЯкщо ви новачок у хуках, ви можете спочатку переглянути огляд. Також ви можете знайти корисну інформацію у розділі FAQ.
\nuseStateuseEffectuseContextuseState const [state, setState] = useState(initialState);Повертає значення стану та функцію, що оновлює його.
\nПід час початкового рендеру повернутий стан (state) співпадає зі значенням, переданим у першому аргументі (initialState).
Функція setState використовується для оновлення стану. Вона приймає значення нового стану і ставить у чергу повторний рендер компонента.
setState(newState);Упродовж наступних повторних рендерів, перше значення, повернуте useState, завжди буде в актуальному стані при здійсненні оновлень.
\n\nПримітка
\nReact гарантує, що функція
\nsetStateзберігає ідентичність і не змінюється під час повторних рендерів. Саме тому, ви можете безпечно пропускати її включення до списків залежностей хуківuseEffectчиuseCallback.
Якщо наступний стан обчислюється з використанням попереднього, ви можете передати функцію до setState. Функція отримає попереднє значення і поверне оновлене. Ось приклад компонента лічильника, що використовує обидві форми setState:
function Counter({initialCount}) {\n const [count, setCount] = useState(initialCount);\n return (\n <>\n Count: {count}\n <button onClick={() => setCount(initialCount)}>Скинути</button>\n <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>\n <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>\n </>\n );\n}Кнопки ”+” та ”-” використовують функціональну форму, тому що оновлене значення базується на попередньому. В той же час кнопка “Скинути” використовує нормальну форму, тому що вона завжди скидає значення назад до початкового значення.
\nЯкщо ваша функція для оновлення повертає таке саме значення, що і поточний стан, то наступний ререндер буде пропущено.
\n\n\nПримітка
\nНа відміну від методу
\nsetStateу класових компонентах,useStateне об’єднує оновлювані об’єкти автоматично. Ви можете відтворити таку поведінку, комбінуючи функціональну форму оновлення і синтаксис розширення об’єктів:\nsetState(prevState => {\n // Object.assign також спрацює\n return {...prevState, ...updatedValues};\n});Іншим варіантом може бути хук
\nuseReducer, котрий більш підходить для керування об’єктами стану, що містять багато інших значень.
Аргумент initialState — це стан, що використовується протягом початкового рендеру. При наступних рендерах воно не враховується. Якщо початковий стан є результатом вартісних обчислень, ви можете замість нього надати функцію, що буде виконана лише під час початкового рендеру:
const [state, setState] = useState(() => {\n const initialState = someExpensiveComputation(props);\n return initialState;\n});Якщо ви оновите стан хука значенням, що дорівнює поточному, React вийде з хука без рендерингу дочірніх елементів чи запуску ефектів. (React використовує алгоритм порівняння Object.is.)
Зверніть увагу, що React-у може знадобитись відрендерити конкретний компонент перед припиненням оновлення. Це не повинно викликати занепокоєння, тому що React необов’язково опуститься “глибше” в дерево. Якщо ви здійснюєте вартісні обчислення під час рендерингу, ви можете оптимізувати їх, використавши useMemo.
useEffect useEffect(didUpdate);Приймає функцію, що містить імперативний, можливо з ефектами, код.
\nЗміни, підписки, таймери, логування та інші побічні ефекти не дозволяються всередині основного тіла функціонального компонента (яке ми називаємо етап рендеру). Це призводить до заплутаних помилок та невідповідностям у користувацькому інтерфейсі.
\nНатомість застосовуйте useEffect. Функція, передана в useEffect, буде запущена після того, як вивід рендеру з’явиться на екрані. Думайте про ефекти як про засіб втечі з чисто функціонального світу React до світу імперативів.
За замовчуванням ефекти запускаються після кожного завершеного рендеру, але ви можете запускати їх, наприклад, коли змінились тільки певні значення.
\nЕфекти часто створюють ресурси, пам’ять після використання яких, має бути звільнена перед тим, як компонент зникне з екрану, наприклад, підписка або ідентифікатор таймера. Щоб це зробити, функція, передана у useEffect, може повернути функцію очищення. Наприклад, щоб створити підписку:
useEffect(() => {\n const subscription = props.source.subscribe();\n return () => {\n // Очистити підписку\n subscription.unsubscribe();\n };\n});Функція очищення буде запущена перед видаленням компонента з інтерфейсу користувача, щоб запобігти витокам пам’яті. Крім цього, якщо компонент рендериться багато разів (що доволі типово), попередній ефект буде очищено до виконання наступного. У нашому прикладі це означає, що нова підписка створюється на кожному оновленні. Зверніться до наступного розділу, щоб дізнатися, як цього можна уникнути.
\nНа відміну від componentDidMount і componentDidUpdate, функція передана в useEffect запускається після розмітки та рендеру, протягом відкладеної події. Це робить хук підходящим для багатьох поширених побічних ефектів, таких як налаштування підписок та обробників подій, оскільки більшість типів роботи не повинні блокувати оновлення екрану браузером.
Проте не всі ефекти можуть бути відкладені. Наприклад, зміна DOM, що видима користувачу, має запуститись синхронно перед наступним рендером, щоб користувач не помічав візуальної невідповідності. (Ця відмінність концептально подібна до відмінності між пасивними та активними слухачами подій.) Для таких різновидів ефектів React надає додатковий хук, що зветься useLayoutEffect. Він має таку ж сигнатуру, як і useEffect, але відрізняється умовою запуску.
Незважаючи на те, що useEffect відкладається допоки браузер не виконає відображення, він гарантовано спрацює перед кожним новим рендером. React завжди застосовує ефекти попереднього рендеру перед початком нового оновлення.
За замовчуванням ефекти спрацьовуються після кожного завершеного рендеру. Таким чином, ефект завжди створюється повторно при зміні одної з його залежностей.
\nПроте, у деяких випадках, це може бути надлишковим, так само як у прикладі з підпискою у попередньому розділі. Нам не потрібно створювати нову підписку для кожного оновлення, а лише тоді, коли змінився проп source.
Щоб реалізувати це, передайте другим аргументом до useEffect масив значень, від яких залежить ефект. Наш оновлений ефект тепер виглядає так:
useEffect(\n () => {\n const subscription = props.source.subscribe();\n return () => {\n subscription.unsubscribe();\n };\n },\n [props.source],\n);Зараз підписка буде створена повторно лише при зміні props.source.
\n\nПримітка
\nЯкщо ви використовуєте цю оптимізацію, впевніться, що масив включає всі значення з області видимості компонента (такі як пропси чи стан), що можуть змінюватись протягом часу і використовуються ефектом. Інакше, ваш код буде посилатись на застарілі значення з попередніх рендерів. Дізнайтеся більше про те, як мати справу з функціями та що робити, коли значення масиву змінюються надто часто.
\nЯкщо ви хочете запустити ефект і очистити його лише раз (при монтуванні і розмонтуванні), ви можете передати другим аргументом порожній масив (
\n[]). React буде вважати, що ваш ефект не залежить від жодного із значень пропсів чи стану, а тому не потребує повторного запуску. Це не оброблюється як особливий випадок, а напряму випливає з роботи масиву залежностей.Якщо ви передаєте порожній масив (
\n[]), пропси і стан усередині ефекту будуть завжди мати їх початкові значення. Передача другим аргументом[], нагадує модель роботи вже знайомихcomponentDidMountтаcomponentWillUnmount, але зазвичай є кращі рішення для уникнення частих повторних викликів ефектів. Також не забудьте, що React відкладає виконанняuseEffectдо моменту відображення вмісту браузером, а отже можливість виконання додаткової роботи не є істотною проблемою.Ми радимо використовувати правило
\nexhaustive-deps, як частину нашого пакункуeslint-plugin-react-hooks. Воно попереджує про те, що залежності вказані невірно і пропонує рішення.
Масив залежностей не передається у якості аргументів до функції ефекту. Концептуально, проте, це те, що вони представляють: кожне значення, на яке посилається функція ефекту, також має з’являтись у масиві залежностей. У майбутньому, достатньо просунутий компілятор зможе створити цей масив автоматично.
\nuseContext const value = useContext(MyContext);Приймає об’єкт контексту (значення, повернуте з React.createContext) і повертає поточне значення контексту для нього. Поточне значення контексту визначається пропом value найближчого <MyContext.Provider>, що знаходиться вище у дереві компонентів.
Коли найближчий <MyContext.Provider>, що знаходиться вище поточного компонента, оновлюється, цей хук викличе повторний рендер з актуальним value контексту, переданим до провайдера MyContext. Навіть якщо предок використовує React.memo або shouldComponentUpdate, ререндер все одно відбудеться, починаючи з поточного компонента та використовуючи useContext.
Не забудьте про те, що аргумент переданий у useContext, повинен бути власне об’єктом контексту:
useContext(MyContext)useContext(MyContext.Consumer)useContext(MyContext.Provider)Компонент, що викликає useContext, завжди повторно відрендериться при зміні значення контексту. Якщо повторний рендер є вартісною операцією, ви можете оптимізувати його, використавши мемоізацію.
\n\nПорада
\nЯкщо ви ознайомились з API контексту до хуків,
\nuseContext(MyContext)є еквівалентнимstatic contextType = MyContextу класі чи<MyContext.Consumer>.\n
useContext(MyContext)дозволяє лише читати контекст і підписуватись на його зміни. Вам і досі необхідно мати<MyContext.Provider>вище у дереві, щоб надати цьому контексту значення.
Давайте використаємо Context.Provider
\nconst themes = {\n light: {\n foreground: \"#000000\",\n background: \"#eeeeee\"\n },\n dark: {\n foreground: \"#ffffff\",\n background: \"#222222\"\n }\n};\n\nconst ThemeContext = React.createContext(themes.light);\n\nfunction App() {\n return (\n <ThemeContext.Provider value={themes.dark}>\n <Toolbar />\n </ThemeContext.Provider>\n );\n}\n\nfunction Toolbar(props) {\n return (\n <div>\n <ThemedButton />\n </div>\n );\n}\n\nfunction ThemedButton() {\n const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> );\n}Цей приклад – версія прикладу з документації контекста, адаптована під хуки. Там ви зможете знайти більше інформації про те, як і коли використовувати контекст.
\nНаступні хуки є або варіантами базових із розділу вище, або потрібні у вкрай специфічних випадках. Не потрібно вивчати їх наперед.
\nuseReducer const [state, dispatch] = useReducer(reducer, initialArg, init);Є альтернативою useState. Приймає редюсер типу (state, action) => newState і повертає поточний стан у парі з методом dispatch. (Якщо ви знайомі з Redux, ви вже знаєте як це працює.)
Слід віддати перевагу useReducer над useState, коли ви маєте складну логіку стану, що включає багато значень чи ваш наступний стан залежить від попереднього. Крім того, useReducer дозволяє вам оптимізувати продуктивність для компонентів, що викликають глибокі оновлення, тому що ви можете передати вниз dispatch, замість функцій повторного виклику.
Ось приклад лічильника із розділу useState, переписаний із використанням редюсера:
const initialState = {count: 0};\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n default:\n throw new Error();\n }\n}\n\nfunction Counter() {\n const [state, dispatch] = useReducer(reducer, initialState);\n return (\n <>\n Count: {state.count}\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}\n\nПримітка
\nReact гарантує, що функція
\ndispatchзберігає ідентичність і не змінюється під час повторних рендерів. Саме тому, ви можете безпечно пропускати її включення до списків залежностей хуківuseEffectчиuseCallback.
Є два різних шляхи ініціалізації стану useReducer. Ви можете обрати будь-який, залежно від ситуації. Найпростішим варіантом є передача початкового стану другим аргументом:
const [state, dispatch] = useReducer(\n reducer,\n {count: initialCount} );\n\nПримітка
\nReact не використовує
\nstate = initialStateконвенцію про аргументи, популяризовану в Redux. Початкове значення часом залежить від пропсів, а тому вказується безпосередньо у виклиці хука. Якщо ви впевнені щодо цього, ви можете викликатиuseReducer(reducer, undefined, reducer), щоб земулювати поведінку Redux, але робити так не рекомендується.
Ви також можете ліниво створити початковий стан. Щоб зробити це, ви можете передати функцію init третім аргументом. Початковий стан буде встановлений у init(initialArg).
Це дозволить винести логіку обчислення початкового стану з редюсера. Також це може бути корисним при скиданні стану пізніше у відповідь на дію:
\nfunction init(initialCount) { return {count: initialCount};}\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n case 'reset': return init(action.payload); default:\n throw new Error();\n }\n}\n\nfunction Counter({initialCount}) {\n const [state, dispatch] = useReducer(reducer, initialCount, init); return (\n <>\n Лічильник: {state.count}\n <button\n onClick={() => dispatch({type: 'reset', payload: initialCount})}> Скинути\n </button>\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}Якщо ви повернете з хука редюсера значення, що дорівнює поточному стану, React вийде з нього без рендерингу дочірніх елементів чи запуску ефектів. (React використовує алгоритм порівняння Object.is.)
Зверніть увагу, що React-у може знадобитись відрендерити конкретний компонент перед припиненням оновлення. Це не повинно викликати занепокоєння, тому що React необов’язково опуститься “глибше” в дерево. Якщо ви здійснюєте вартісні обчислення під час рендерингу, ви можете оптимізувати їх, використавши useMemo.
useCallback const memoizedCallback = useCallback(\n () => {\n doSomething(a, b);\n },\n [a, b],\n);Повертає мемоізовану функцію зворотнього виклику.
\nПередайте вбудовану функцію зворотнього виклику і масив залежностей. useCallback поверне мемоізовану версію функції зворотнього виклику, котра змінюється лише тоді, коли одна з її залежностей змінюється. Це корисно при передачі фукцій зворотнього виклику до оптимізоваих дочірніх компонентів, що покладаються на рівність посилань задля уникнення непотрібних рендерів (наприклад, shouldComponentUpdate).
useCallback(fn, deps) є еквівалентом useMemo(() => fn, deps).
\n\nПримітка
\nМасив залежностей не передається у якості аргументів до функції зворотнього виклику. Концептуально, проте, це те, що вони представляють: кожне значення, на яке посилається функція зворотнього виклику, також має з’являтись у масиві залежностей. У майбутньому, достатньо просунутий компілятор зможе створити цей масив автоматично.
\nМи радимо використовувати правило
\nexhaustive-deps, як частину нашого пакункуeslint-plugin-react-hooks. Воно попереджує про те, що залежності вказані невірно і пропонує рішення.
useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);Повертає мемоізоване значення.
\nПередайте функцію “створення” та масив залежностей. useMemo повторно обчислить мемоізоване значення лише при зміні однієї з залежностей. Така оптимізація допомагає уникнути вартісних обчислень при кожному рендері.
Пам’ятайте, що функція, передана до useMemo, запускається під час рендерингу. Не робіть у ній нічого, що ви зазвичай не робите під час рендерингу. Наприклад, побічні ефекти мають бути в useEffect, а не useMemo.
Якщо масив не наданий, нове значення буде обчислене при кожному рендері.
\nВи можете покластись на useMemo як на оптимізацію продуктивності, а не на семантичу гарантію. У майбутньому React може вирішити “забути” деякі попередньо мемоізовані значення і переобчислити їх при наступному рендері, наприклад, для звільнення пам’яті для компонентів поза областю видимості екрана. Напишіть ваш код так, щоб він працював без useMemo, а потім додайте його для оптимізації продуктивності.
\n\nПримітка
\nМасив залежностей не передається у якості аргументів до функції. Концептуально, проте, це те, що вони представляють: кожне значення, на яке посилається функція, також має з’являтись у масиві залежностей. У майбутньому, достатньо просунутий компілятор зможе створити цей масив автоматично.
\nМи радимо використовувати правило
\nexhaustive-deps, як частину нашого пакункуeslint-plugin-react-hooks. Воно попереджує про те, що залежності вказані невірно і пропонує рішення.
useRef const refContainer = useRef(initialValue);useRef поверне змінний об’єкт рефу, властивість .current якого ініціалізується переданим аргументом (initialValue). Повернутий об’єкт буде зберігатись протягом всього часу життя компонента.
Поширеним випадком використання є імперативний доступ до потомків:
\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // `current` вказує на примонтований елемент поля вводу тексту\n inputEl.current.focus();\n };\n return (\n <>\n <input ref={inputEl} type=\"text\" />\n <button onClick={onButtonClick}>Фокусуватись на полі вводу</button>\n </>\n );\n}По суті, useRef — це “коробка”, що може містити змінне значення у власній властивості .current.
Рефи можуть бути вам знайомі перш за все як засіб доступу до DOM. Якщо ви передасте об’єкт рефу у React як <div ref={myRef} />, React встановить його властивість .current рівною значенню відповідного DOM вузла при будь-якій зміні цього вузла.
Проте useRef() є корисним не тільки для простого атрибута ref. Він згодиться для постійного збереження будь-якого змінного значення подібно до використання полей екземпляра класу.
Це можливо, тому що useRef() створює простий JavaScript-об’єкт. Єдина різниця між useRef() і створенням об’єкта {current: ...} власноруч полягає в тому, що useRef поверне один і той самий реф-об’єкт при кожному рендері.
Пам’ятайте, що useRef не повідомляє вас про зміну свого вмісту. Зміна властивості .current не спричинить повторний рендер. Якщо ви хочете запустити деякий код під час того, як React прикріплює чи від’єднує реф до вузла DOM, то вам краще використати реф зворотнього виклику.
useImperativeHandle useImperativeHandle(ref, createHandle, [deps])useImperativeHandle налаштовує значення екземпляра, яке надається батьківським компонентам при використанні ref. Як і зазвичай, у більшості випадків ви маєте уникати імперативного коду з використанням рефів. useImperativeHandle має використовуватись разом з forwardRef:
function FancyInput(props, ref) {\n const inputRef = useRef();\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n return <input ref={inputRef} ... />;\n}\nFancyInput = forwardRef(FancyInput);У цьому прикладі батьківський компонент, що рендерить <FancyInput ref={inputRef} />, матиме змогу викликати inputRef.current.focus().
useLayoutEffect Сигнатура хука є ідентичною useEffect, але він запускається синхронно після всіх змін DOM. Використовуйте це для читання розмітки з DOM і синхронних повторних рендерів. Оновлення, заплановані всередині useLayoutEffect, будуть виконані синхронно перед тим, як браузер відобразить їх.
Віддайте перевагу використанню useEffect, коли це можливо, щоб уникнути блокування візуальних оновлень.
\n\nПорада
\nЯкщо ви переробляєте код класового компонента, зверніть увагу, що
\nuseLayoutEffectзапускається на тому ж етапі, що йcomponentDidMountтаcomponentDidUpdate. Однак ми рекомендуємо розпочати з використанняuseEffectі спробуватиuseLayoutEffectтільки при виникненні проблем.Якщо ви використовуєте серверний рендеринг, пам’ятайте, що ані
\nuseLayoutEffect, ніuseEffectне можуть бути запущені допоки JavaScript не завантажився. Саме тому React попереджує про те, що компонент, який рендериться на сервері, міститьuseLayoutEffect. Щоб виправити це, ви можете помістити цю логіку вuseEffect(якщо вона не потрібна при першому рендері) або відкласти відображення цього компонента до моменту, коли відрендериться клієнт (якщо HTML виглядає невалідним до запускуuseLayoutEffect).Щоб виключити компонент, що потребує ефектів розмітки, із відрендереного на сервері HTML, відрендеріть його умовно з допомогою
\nshowChild && <Child />і відкладіть його відображення, використавшиuseEffect(() => { setShowChild(true); }, []). Таким чином, інтерфейс користувача не буде виглядати неправильно перед гідратацією.
useDebugValue useDebugValue(value)useDebugValue може бути використаний для відображення мітки користувацьких хуків у інструментах розробника React.
Наприклад, ми маємо користувацький хук useFriendStatus описаний у розділі “Створення користувацьких хуків”:
function useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null);\n\n // ...\n\n // Показує мітку у інструментах розробника поруч з цим хуком // наприклад, \"FriendStatus: В мережі\" useDebugValue(isOnline ? 'В мережі' : 'Не в мережі');\n return isOnline;\n}\n\nПорада
\nМи не радимо додавати значення для налагодження до кожного користувацького хука. Вони найбільш цінні для користувацьких хуків, що є частиною загальнодоступних бібліотек.
\n
У певних випадках, форматування значення для відображення може бути вартісною операцією. Також воно не потрібне у випадку, коли хук не перевіряється безпосередньо.
\nЗ цієї причини useDebugValue приймає функцію форматування у якості необов’язкового другого параметра. Ця функція викликається лише при перевірці хуків. Вона отримує налагоджувальне значення у якості параметра і повинна повертати форматоване значення для відображення.
Для прикладу, користувацький хук, що повертає значення Date, може уникнути викликання функції toDateString, передавши наступну функцію форматування:
useDebugValue(date, date => date.toDateString());