\n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach modern React:
\n\n
\n- \n
react: Hooks
Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.
\nНа этой странице описан API, относящийся к встроенным хукам React.
\nЕсли вы новичок в хуках, вы можете сначала ознакомиться с общим обзором. Вы также можете найти полезную информацию в главе «Хуки: ответы на вопросы».
\nuseStateuseEffectuseContextuseState \n\nThis content is out of date.
\nRead the new React documentation for
\nuseState.
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}\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}Кнопки «+» и «-» используют функциональную форму, потому что обновлённое значение основано на предыдущем значении. Но кнопка «Сбросить» использует обычную форму, потому что она всегда устанавливает счётчик обратно в 0.
\nЕсли функция обновления возвращает абсолютно такой же результат как и текущее состояние, то последующие повторные рендеры будут полностью пропущены.
\n\n\nПримечание
\nВ отличие от метода
\nsetState, который вы можете найти в классовых компонентах,useStateне объединяет объекты обновления автоматически. Вы можете повторить это поведение, комбинируя форму функции обновления с синтаксисом расширения объекта:\nconst [state, setState] = 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.
React может группировать несколько обновлений состояния в один повторный рендер для улучшения производительности. Обычно это улучшает производительность и не должно влиять на поведение вашего приложения.
\nДо 18 версии React группировал только обновления внутри обработчиков событий. Начиная с 18 версии, группировка включена по умолчанию для всех обновлений. Обратите внимание, что если обновления вызваны несколькими различными действиями пользователя — например, пользователь дважды кликнул на кнопку — то они обрабатываются раздельно и не будут сгруппированы. Это позволяет избежать логических ошибок.
\nВ редких случаях, когда вам нужно вызвать принудительное синхронное обновление DOM, вы можете обернуть его в flushSync. Однако это может вызвать ухудшение производительности, используйте это только в тех случаях, где это действительно нужно.
useEffect \n\nThis content is out of date.
\nRead the new React documentation for
\nuseEffect.
useEffect(didUpdate);Принимает функцию, которая содержит императивный код, возможно, с эффектами.
\nМутации, подписки, таймеры, логирование и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого этапом рендеринга React). Это приведёт к запутанным ошибкам и несоответствиям в пользовательском интерфейсе.
\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, и отличается только в его запуске.
Также с 18 версии React, функция, переданная в useEffect, будет вызвана синхронно перед разметкой и отрисовкой, если эффект был вызван действием пользователя или результат обновления был обернут в flushSync. Такое поведение позволяет системе событий или функции, вызвавшей flushSync следить за результатом эффекта.
\n\nПримечание
\nЭто влияет только на время, когда функция, переданная в
\nuseEffect, будет вызвана — обновления, которые запланированы внутри эффектов останутся отложенными. Это поведение отлично отuseLayoutEffect, который вызывает функцию и обрабатывает обновления внутри него мнгновенно.
Хотя 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 \n\nThis content is out of date.
\nRead the new React documentation for
\nuseContext.
const value = useContext(MyContext);Принимает объект контекста (значение, возвращённое из React.createContext) и возвращает текущее значение контекста для этого контекста. Текущее значение контекста определяется пропом value ближайшего <MyContext.Provider> над вызывающим компонентом в дереве.
Когда ближайший <MyContext.Provider> над компонентом обновляется, этот хук вызовет повторный рендер с последним значением контекста, переданным этому провайдеру MyContext. Даже если родительский компонент использует React.memo или реализует shouldComponentUpdate, то повторный рендер будет выполняться, начиная c компонента, использующего 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 }}> Я стилизован темой из контекста! </button> );\n}Это пример из раздела Продвинутые темы: Контекст, только переписанный с использованием хуков. В этом же разделе можно найти больше информации о том, как и когда использовать объект Context.
\nСледующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Их не требуется основательно изучать заранее.
\nuseReducer \n\nThis content is out of date.
\nRead the new React documentation for
\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 Count: {state.count}\n <button\n onClick={() => dispatch({type: 'reset', payload: initialCount})}> Reset\n </button>\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}dispatch Если вы вернёте то же значение из редюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует алгоритм сравнения Object.is.)
\nОбратите внимание, что для React всё ещё может быть необходим повторный рендер этого компонента. Это не должно быть проблемой, потому что React не будет сильно «углубляться» в дерево. Если вы делаете дорогостоящие вычисления во время рендеринга, вы можете оптимизировать их с помощью useMemo.
useCallback \n\nThis content is out of date.
\nRead the new React documentation for
\nuseCallback.
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 \n\nThis content is out of date.
\nRead the new React documentation for
\nuseMemo.
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 \n\nThis content is out of date.
\nRead the new React documentation for
\nuseRef.
const refContainer = useRef(initialValue);useRef возвращает изменяемый ref-объект, свойство .current которого инициализируется переданным аргументом (initialValue). Возвращённый объект будет сохраняться в течение всего времени жизни компонента.
Обычный случай использования — это доступ к потомку в императивном стиле:
\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // `current` указывает на смонтированный элемент `input`\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() полезен не только установкой атрибута с рефом. Он удобен для сохранения любого мутируемого значения, по аналогии с тем, как вы используете поля экземпляра в классах.
Это возможно, поскольку useRef() создаёт обычный JavaScript-объект. Единственная разница между useRef() и просто созданием самого объекта {current: ...} — это то, что хук useRef даст один и тот же объект с рефом при каждом рендере.
Имейте в виду, что useRef не уведомляет вас, когда изменяется его содержимое. Мутирование свойства .current не вызывает повторный рендер. Если вы хотите запустить некоторый код, когда React присоединяет или отсоединяет реф к узлу DOM, вы можете использовать колбэк-реф вместо этого.
useImperativeHandle \n\nThis content is out of date.
\nRead the new React documentation for
\nuseImperativeHandle.
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 \n\nThis content is out of date.
\nRead the new React documentation for
\nuseLayoutEffect.
Сигнатура идентична 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 \n\nThis content is out of date.
\nRead the new React documentation for
\nuseDebugValue.
useDebugValue(value)useDebugValue может использоваться для отображения метки для пользовательских хуков в React DevTools.
Например, рассмотрим пользовательский хук useFriendStatus, описанный в разделе «Создание собственных хуков»:
function useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null);\n\n // ...\n\n // Показывать ярлык в DevTools рядом с этим хуком // например, «Статус друга: В сети» useDebugValue(isOnline ? 'В сети' : 'Не в сети');\n return isOnline;\n}\n\nСовет
\nМы не рекомендуем добавлять значения отладки в каждый пользовательский хук. Это наиболее ценно для пользовательских хуков, которые являются частью общих библиотек.
\n
В некоторых случаях форматирование значения для отображения может быть дорогой операцией. Это также не нужно, если хук не проверен.
\nПо этой причине useDebugValue принимает функцию форматирования в качестве необязательного второго параметра. Эта функция вызывается только при проверке хуков. Она получает значение отладки в качестве параметра и должна возвращать форматированное отображаемое значение.
Например, пользовательский хук, который возвратил значение Date, может избежать ненужного вызова функции toDateString, передав следующую функцию форматирования:
useDebugValue(date, date => date.toDateString());useDeferredValue \n\nThis content is out of date.
\nRead the new React documentation for
\nuseDeferredValue.
const deferredValue = useDeferredValue(value);useDeferredValue accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.
This hook is similar to user-space hooks which use debouncing or throttling to defer updates. The benefits to using useDeferredValue is that React will work on the update as soon as other work finishes (instead of waiting for an arbitrary amount of time), and like startTransition, deferred values can suspend without triggering an unexpected fallback for existing content.
useDeferredValue only defers the value that you pass to it. If you want to prevent a child component from re-rendering during an urgent update, you must also memoize that component with React.memo or React.useMemo:
function Typeahead() {\n const query = useSearchQuery('');\n const deferredQuery = useDeferredValue(query);\n\n // Memoizing tells React to only re-render when deferredQuery changes,\n // not when query changes.\n const suggestions = useMemo(() =>\n <SearchSuggestions query={deferredQuery} />,\n [deferredQuery]\n );\n\n return (\n <>\n <SearchInput query={query} />\n <Suspense fallback=\"Loading results...\">\n {suggestions}\n </Suspense>\n </>\n );\n}Memoizing the children tells React that it only needs to re-render them when deferredQuery changes and not when query changes. This caveat is not unique to useDeferredValue, and it’s the same pattern you would use with similar hooks that use debouncing or throttling.
useTransition \n\nThis content is out of date.
\nRead the new React documentation for
\nuseTransition.
const [isPending, startTransition] = useTransition();Returns a stateful value for the pending state of the transition, and a function to start it.
\nstartTransition lets you mark updates in the provided callback as transitions:
startTransition(() => {\n setCount(count + 1);\n});isPending indicates when a transition is active to show a pending state:
function App() {\n const [isPending, startTransition] = useTransition();\n const [count, setCount] = useState(0);\n \n function handleClick() {\n startTransition(() => {\n setCount(c => c + 1);\n });\n }\n\n return (\n <div>\n {isPending && <Spinner />}\n <button onClick={handleClick}>{count}</button>\n </div>\n );\n}\n\nNote:
\nUpdates in a transition yield to more urgent updates such as clicks.
\nUpdates in a transition will not show a fallback for re-suspended content. This allows the user to continue interacting with the current content while rendering the update.
\n
useId \n\nThis content is out of date.
\nRead the new React documentation for
\nuseId.
const id = useId();useId is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.
\n\nNote
\n\n
useIdis not for generating keys in a list. Keys should be generated from your data.
For a basic example, pass the id directly to the elements that need it:
function Checkbox() {\n const id = useId();\n return (\n <>\n <label htmlFor={id}>Do you like React?</label>\n <input id={id} type=\"checkbox\" name=\"react\"/>\n </>\n );\n};For multiple IDs in the same component, append a suffix using the same id:
function NameFields() {\n const id = useId();\n return (\n <div>\n <label htmlFor={id + '-firstName'}>First Name</label>\n <div>\n <input id={id + '-firstName'} type=\"text\" />\n </div>\n <label htmlFor={id + '-lastName'}>Last Name</label>\n <div>\n <input id={id + '-lastName'} type=\"text\" />\n </div>\n </div>\n );\n}\n\nNote:
\n\n
useIdgenerates a string that includes the:token. This helps ensure that the token is unique, but is not supported in CSS selectors or APIs likequerySelectorAll.\n
useIdsupports anidentifierPrefixto prevent collisions in multi-root apps. To configure, see the options forhydrateRootandReactDOMServer.
The following Hooks are provided for library authors to integrate libraries deeply into the React model, and are not typically used in application code.
\nuseSyncExternalStore \n\nThis content is out of date.
\nRead the new React documentation for
\nuseSyncExternalStore.
const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);useSyncExternalStore is a hook recommended for reading and subscribing from external data sources in a way that’s compatible with concurrent rendering features like selective hydration and time slicing.
This method returns the value of the store and accepts three arguments:
\nsubscribe: function to register a callback that is called whenever the store changes.getSnapshot: function that returns the current value of the store.getServerSnapshot: function that returns the snapshot used during server rendering.The most basic example simply subscribes to the entire store:
\nconst state = useSyncExternalStore(store.subscribe, store.getSnapshot);However, you can also subscribe to a specific field:
\nconst selectedField = useSyncExternalStore(\n store.subscribe,\n () => store.getSnapshot().selectedField,\n);When server rendering, you must serialize the store value used on the server, and provide it to useSyncExternalStore. React will use this snapshot during hydration to prevent server mismatches:
const selectedField = useSyncExternalStore(\n store.subscribe,\n () => store.getSnapshot().selectedField,\n () => INITIAL_SERVER_SNAPSHOT.selectedField,\n);\n\nNote:
\n\n
getSnapshotmust return a cached value. If getSnapshot is called multiple times in a row, it must return the same exact value unless there was a store update in between.A shim is provided for supporting multiple React versions published as
\nuse-sync-external-store/shim. This shim will preferuseSyncExternalStorewhen available, and fallback to a user-space implementation when it’s not.As a convenience, we also provide a version of the API with automatic support for memoizing the result of getSnapshot published as
\nuse-sync-external-store/with-selector.
useInsertionEffect \n\nThis content is out of date.
\nRead the new React documentation for
\nuseInsertionEffect.
useInsertionEffect(didUpdate);The signature is identical to useEffect, but it fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in useLayoutEffect. Since this hook is limited in scope, this hook does not have access to refs and cannot schedule updates.
\n","frontmatter":{"title":"Справочник API хуков","next":"hooks-faq.html","prev":"hooks-custom.html"},"fields":{"path":"content/docs/hooks-reference.md","slug":"docs/hooks-reference.html"}}},"pageContext":{"slug":"docs/hooks-reference.html"}},"staticQueryHashes":[]}Note:
\n\n
useInsertionEffectshould be limited to css-in-js library authors. PreferuseEffectoruseLayoutEffectinstead.