React hooks что это

React Hooks простыми словами

О хуках в фронтенд-разработке на Хабре писали уже не раз, и в этой статье мы не сделаем великого открытия. Наша цель другая – рассказать про React Hooks настолько подробно и просто без трудной терминологии, насколько это возможно. Чтобы после прочтения статьи каждый понял про хуки всё. Эта статья будет полезна как начинающим React-разработчикам, так и тем, кто хочет, не уходя в глубины документации, получить практическую информацию в сжатом виде.

На заре React-человечества

Когда сообщество впервые познакомилось с функциональными компонентами, они служили только для того, чтобы выводить информацию. У них не было ни состояния, ни методов жизненного цикла. Они были очень простыми – в этом и заключалась их проблема. Часто возникала ситуация, что компонент, написанный в функциональном стиле, должен был в дальнейшем иметь состояние или методы жизненного цикла, а такой возможности не было. Приходилось переписывать их в классовые компоненты, а это далеко не самое интересное занятие для разработчика.

Такое положение дел подтолкнуло разработчиков React к созданию хуков, позволяющих расширить возможности функциональных компонентов либо нивелировать некоторые проблемы, которые могут возникать из-за их специфики. Хуки оказались настолько удобны, что стали основой React-разработки. Рассмотрим подробнее.

Хук useState – простой хук для разработчика, но важный для всего приложения

Начнём с самого простого и важного хука – useState. Из самого названия становится понятно, что он связан с состоянием компонента. Именно благодаря ему у функциональных компонентов появилось состояние.

Приведу простой пример использования данного хука, а потом разберем его подробнее.

const App = () => < const [value, valueChange] = useState(0); return ( 
  valueChange(value + 1)>> Увеличить значение на 1 
 ); >;

По сути, этот пример состоит из состояния value, которое содержит в себе целочисленное значение, и кнопки “Увеличить значение на 1”. При нажатии на нее состояние value увеличивается на 1.

Посмотрите на строчку:

const [value, valueChange] = useState(0);

В ней создается состояние и метод, который будет менять это значение. Хук useState по сути принимает в качестве параметра начальное значение, то есть на начальном этапе наш value будет иметь значение 1. И возвращает useState массив из двух элементов: первый – состояние, второй – метод, который будет его изменять. Разработчики хуков использовали довольно изящный подход. При использовании деструктуризации он позволяет задать любое значение состояния и метода минимальным количеством кода.

Обратите внимание еще на одну строчку:

 valueChange(value + 1)>> увеличить значение на 1 

Тут добавлен обработчик события нажатия на кнопку. Поясню: при нажатии на кнопку мы вызываем метод valueChange и отправляем туда новое значение – в нашем случае увеличенное на один.

В остальном всё как с обычным состоянием компонента. Основное отличие: в классовом компоненте мы можем создать только одно общее состояние компонента, а в функциональном – несколько, и они будут независимы друг от друга, но каждое из них будет вызывать рендеринг компонентов.

Хук useContext – сквозь пространство

Чтобы передать какие-то данные в компонент, мы можем использовать props. Но есть и альтернативный способ – context.

Если вы ранее его не использовали, то контекст позволяет передавать данные от родительского компонента к дочернему, минуя промежуточные.

Чтобы было понятнее, создали небольшой пример, который позволит понять его работу. У нас есть три компонента. Первый из них External – внешний, второй – Intermediate, то есть промежуточный, а третий назовем Internal, и он будет внутренним. По сути, все они будут вложены друг в друга. Наша задача – передача данных из компонента External в компонент Internal, минуя Intermediate, так как к нему эти данные отношения не имеют.

import from "react"; const MyContext = createContext("without provider"); const External = () => < return (   ); >; const Intermediate = () => < return ; >; const Internal = () => < const context = useContext(MyContext); return `I am Internal component. I have got the message from External: "$"`; >;

Чтобы использовать контекст, мы создаём объект MyContext, вызывая метод createContext. В компоненте External оборачиваем компонент Intermediate в компонент MyContext.Provider. Тем самым говорим, что все вложенные в него компоненты смогут получить доступ к данным, которые мы передаем, помещая их в параметр value.

Причём они будут доступны только в тех компонентах, в которых нам это нужно. Для этого мы должны использовать хук useContext, а в качестве аргумента у него будет объект MyContext. Хук useContext вернёт нам данные, переданные в параметр value у MyContext.Provider, которые мы поместим в переменную context. Обратите внимание, что в качестве аргумента в createContext мы передали строку (“without context”). Его значение попадет в переменную context в том случае, если вы вдруг забудете создать обертку MyContext.Provider, то есть он поможет не допустить ошибку из-за невнимательности.

Благодаря хуку useContext можно использовать context в функциональных компонентах, и данные будут попадать только в те компоненты, в которых они нужны. Также он избавит от проблемы с drops drilling.

Хуки useEffect и useLayoutEffect – придание жизни компонентам, а точнее – придание методов жизненного цикла

Если вы работали с классовыми компонентами, то знакомы с методами жизненного цикла. Они служат для того, чтобы совершать какие-то операции на разных стадиях жизни компонента. Для этого у нас есть два хука – useEffect и useLayoutEffect. Они похожи между собой, за исключением небольшой разницы в рендеринге. В случае с useLayoutEffect React не запускает рендеринг построенного DOM дерева до тех пор, пока не отработает useLayoutEffect. Если же мы берём useEffect, то React сразу запускает рендеринг построенного DOM, не дожидаясь запуска useEffect.

С помощью этих двух хуков в функциональных компонентах можно смоделировать работу трех методов жизненного цикла – componentDidMount, componentDidUpdate, componentWillUnmount. Более точно их работу имитирует useLayoutEffect, так как в классовых компонентах отрисовка DOM-дерева не запускается до тех пор, пока не отработает метод componentDidMount.

Поскольку эти два хука имеют один и тот же интерфейс, продемонстрируем его на более популярном хуке – useEffect, а для другого всё будет аналогично.

useEffect принимает в себя два аргумента:

• callback. Внутри него вся полезная нагрузка, которую мы хотим описать. Например, можно делать запросы на сервер, задание обработчиков событий на документ или что-то ещё;
• массив, состоящий из аргументов. При изменении значения внутри любого из них будет запускаться наш callback. Именно благодаря этому аргументу мы можем имитировать методы жизненного цикла.

Рассмотрим имитацию componentDidMount. Хук useEffect запускается не только при изменении элементов массива из второго аргумента, но также и после монтирования компонента. Фактически componentDidMount запускается на той же стадии. Если мы укажем в качестве второго аргумента пустой массив, callback запустится на стадии монтирования компонента. А поскольку никаких зависимостей для хука внутри массива мы не задали, то аргумент callback не будет больше запускаться.

const App = () => < useEffect(() =>< console.log("componentDidMount"); >, []); return null; >;

Имитация componentDidUpdate также возможна. Но в случае с хуками есть лучший способ. Поскольку мы можем указать в массиве только те зависимости, которые нам нужны, у нас есть более гибкий аналог метода componentDidUpdate, который запускается при изменении необходимых параметров. Если нужно сделать аналогию componentDidUpdate, в качестве зависимостей можно указать все параметры и состояния. При этом важно учитывать, что useEffect запускается и на стадии монтирования.

const App = () => < useEffect(() =>< console.log("componentDidUpdate"); >, [data]); return null; >;

Теперь рассмотрим имитацию componentWillUnmount. Для этого просто возвращаем из useEffect callback. Практически возвращаемый callback – это и есть аналог componentWillUnmount, который часто применяется для отвязывания обработчиков событий документа. В случае с функциональным компонентом мы будем отвязывать их внутри возвращаемого callback.

const App = () => < useEffect(() => < return () =>< console.log("componentWillUnmount"); >; >, []); return null; >;

Хук useRef – прямая связь с узлами и не только

Бывают ситуации, когда необходимо обратиться к какому-то DOM-объекту напрямую. Для этого существует хук useRef.

const App = () => < const ref = useRef(); useEffect(() =>< console.log(ref.current); >, []); return />; >;

Мы создаём объект ref и указываем его в качестве элемента, обозначающего DOM-объект, к которому мы хотим обратиться, а также прописываем этот объект в качестве параметра. Далее мы можем взаимодействовать с Dom-объектом напрямую, как если бы мы нашли его с помощью селектора. Для этого используем свойство current у объекта ref.

Помимо этого можно применить useRef, если нам нужно будет запомнить данные в компоненте. Но не рекомендуем вызывать рендеринг в случае изменения состояния компонента. В классовых компонентах для этой цели обычно используют this.

Хук useReducer – снова идём сквозь пространство

Разработчикам React так понравился Redux, что они решили добавить его аналог в состав React. Этот хук позволяет вынести данные из компонентов.

import from "react"; const initialState = ; function reducer(state, action) < switch (action.type) < case "increment": return < . state, count: state.count + 1, >; case "decrement": return < . state, count: state.count - 1, >; default: throw new Error(); > > const App = () => < const [state, dispatch] = useReducer(reducer, initialState); return ( <>  dispatch()>>- dispatch()>>+ ); >;

У него есть преимущество: вне зависимости от того, как компоненты нашего приложения будут вложены друг в друга, мы сможем отобразить данные в любом компоненте.

Хук useMemo – оптимизируй вычисления

Этот хук позволяет не производить одни и те же вычисления много раз. Допустим, у нас есть следующий компонент:

const MyComponent = () => < const sqrt = a * a; return ( 
А в квадрате: 
B:
 ); >;

В этой ситуации компонент перерендеривается в том случае, если изменяется один из параметров – a или b. Представим, что у нас много раз изменяется параметр b, при этом параметр a остаётся прежним. В таком случае мы много раз вычисляем одно и то же произведение, которое помещаем в переменную sqrt. Но зачем нам это, если параметр a в этом случае остаётся прежним? Получается, мы лишний раз нагружаем наш ПК вычислениями одного и того же. И хотя в данном случае операция произведения не самая “энергозатратная”, в других ситуациях возможна лишняя нагрузка. Избежать избыточных вычислений нам помогает хук useMemo. Давайте немного преобразуем наш пример.

const MyComponent = () => < const sqrt = useMemo(() =>a * a, [a]); return ( 
А в квадрате: 
B:
 ); >;

Тут всё осталось по-прежнему, за исключением ситуации, когда мы обернули наше произведение в хук useMemo, в который передали callback и массив зависимостей. По сути они работают также, как и в useEffect: как только меняется какая-то зависимость из массива, запускается callback, который рассчитывает другое значение. Если ни одна зависимость не поменялась, то при рендеринге в переменную будет подставлено предыдущее вычисленное значение.

Хук useCallback – ещё больше оптимизации

В силу того, что функциональный компонент – это функция, при каждом рендеринге запускается всё, что объявлено в ней. Предположим, что мы создаем внутри компонента функцию и передаем ее в дочерний компонент. Это самая обыкновенная практика. Она часто встречается, когда нам нужно из дочернего компонента изменить что-то в родительском. Создадим небольшой пример, чтобы это продемонстрировать.

const ControlPannel = memo(() => < return ( 
+ 
 ); >); const App = () => < const [value, valueChange] = useState(Math.random()); const changer = () =>valueChange(Math.random()); return ( 
  
 ); >;

В данном примере представлены два компонента, один из них – ControlPanel, который отвечает за стилизацию контрольной панели. В ней всего одна кнопка, которая меняет состояние родительского компонента. В качестве параметра в него передан метод changer, который внутри себя содержит вызов метода valueChange, он-то и обновляет состояние. Для простоты изменим значение состояние, просто поместив туда случайное число. Мы специально обернули ControlPanel в memo, чтобы этот компонент перерисовывался только в том случае, если изменились его параметры. Однако в данном случае у нас возникает проблема: при каждой отрисовке компонента App мы будем заново создавать метод changer. Хотя сигнатура у метода будет одинаковой, каждый раз будет создан новый метод, следовательно, у ControlPanel будут происходить повторные рендеринги, но по сути ничего не меняется. В этом случае в качестве параметра будут передаваться разные реализации одной и той же функции.

Избежать этого поможет useCallback.

const ControlPannel = memo(() => < return ( 
+ 
 ); >); const App = () => < const [value, valueChange] = useState(Math.random()); const increment = useCallback(() =>valueChange(Math.random()), []); return ( 
  
 ); >;

Благодаря этому хуку мы единожды создаем метод и обновляем его только тогда, когда меняется какой-то из параметров, которые мы поместим в качестве элемента массива и передаем вторым аргументом – по аналогии с массивами в других хуках. Так мы мемоизируем наш метод,и у нас не происходит лишний рендеринг, как это было ранее.

Пользовательский хук – создай мир своими руками

Пользовательские хуки – это те же самые функции, которые внутри себя используют какие-либо из стандартных хуков. Единственное требование, которое здесь необходимо соблюдать – относиться к ним, как к хукам. То есть, соблюдать правила, что мы используем при работе с хуками: не вызывать их внутри условных конструкций (таких, как if или switch) и внутри циклов (например for), а также не использовать хуки внутри колбэков других хуков.

Для того чтобы все в команде соблюдали указанные правила и понимали, что это хуки, а не просто методы, называть их лучше в формате useИмяХука.

Рассмотрим пример пользовательского хука:

const useSingleLog = () => < useEffect(() =>< console.log("I am single log"); >, []); >;

Как вы видите, мы создали хук, который позволяет нам единожды вывести строку в консоль. Он содержит в себе хук useEffect. По сути, мы можем использовать его в любых компонентах.

Спасибо за внимание! Надеемся, что материал был вам полезен.

P.S. Если у вас есть базовые знания Frontend и вы хотите их углубить, приглашаем зарегистрироваться на наш онлайн-практикум (до 28 февраля). Также 24 февраля проведем вебинар для всех желающих.

Спасибо за внимание!

Авторские материалы для frontend-разработчиков мы также публикуем в наших соцсетях – ВКонтакте и Telegram.

Введение — JS: React Hooks

Хуки — механизм в React, который позволяет работать полностью без классов. Он не приносит ничего нового, но облегчает повторное использование кода для решения общих задач. Сейчас это основной способ написания React-приложений. Но хуки не заменяют собой классы целиком. Более того, команда React не планирует удалять поддержку классов, а кое-что без классов сделать не получится. Пример работы хука useState для хранения состояния:

// useState — встроенный в React хук // Подробнее рассматривается в следующем уроке import React,  useState > from 'react'; const Example = () =>  // Пример хука для работы с состоянием const [count, setCount] = useState(0); return ( div> p>Вы нажали count> раз(а)p> button onClick=() => setCount(count + 1)>> Нажми меня button> div> ); >; 

Хуки — это функции, имена которых принято начинать с use. Так их легко отличить от любых других функций. В React встроено около 10 хуков, из которых только несколько используются постоянно. К основным относятся те, что повторяют функциональность таких классовых компонентов, как работа с состоянием, побочными эффектами (жизненный цикл), контекстом и прямым доступом к DOM. Их мы рассмотрим в курсе. Информацию по остальным хукам можно найти в официальной документации.

Помимо встроенных, в сети можно найти сотни, если уже не тысячи готовых хуков на все случаи жизни. Например, популярная библиотека react-use насчитывает больше 115 хуков. Сейчас разработка на React во многом превратилась в поиск и использование подходящих хуков. Это хорошо, потому что можно сосредоточиться на действительно важных бизнес-задачах и не заниматься изобретением велосипедов.

Как подготовиться к этому курсу

Этот курс предполагает, что студент уже уверенно владеет синтаксисом и методами работы с функциями и объектами, а также имеет базовое представление о React. Если вам нужно освоить или освежить какие-то знания, рекомендуем вам следующие курсы:

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Введение в хуки

Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.

import React,  useState > from 'react'; function Example()   // Объявление переменной состояния, которую мы назовём "count" const [count, setCount] = useState(0); return ( div> p>Вы кликнули count> разp> button onClick=() => setCount(count + 1)>> Нажми на меня button> div> ); >

Первый хук, который мы изучим, это функция useState . Не беспокойтесь, если этот пример будет поначалу неясен. Скоро мы разберёмся, как он работает.

Вы можете начать изучать хуки на следующей странице. Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения.

Примечание

React 16.8.0 это первый релиз, поддерживающий хуки. При обновлении версии, не забудьте обновить и все зависимости, включая React DOM. Поддержка хуков в React Native появилась в версии 0.59.

На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а Райн Флоренс (Ryan Florence) показал, как их использовать в приложении. Видео конференции можно посмотреть здесь:

Полная обратная совместимость

Перед тем, как мы продолжим, обратите внимание, что хуки:

• Полностью на ваше усмотрение. Вы можете попробовать хуки в одних компонентах, не изменяя код в других. Хуки не обязательно использовать или изучать прямо сейчас.
• 100% обратно совместимы. Хуки не содержат изменений, которые могут поломать ваш существующий код.
• Доступны прямо сейчас. Хуки доступны с выходом версии 16.8.0.

Мы не планируем удалять классы из React. Вы можете прочитать больше о стратегии постепенного внедрения хуков в разделе ниже.

Хуки не меняют ваши знания о концепциях в React. Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсов, состояния, контекста, рефов, и жизненного цикла. Мы также рассмотрим мощный способ компоновать эти понятия с помощью хуков.

Чтобы начать изучать хуки, перейдите на следующую страницу! На этой странице мы расскажем о том, зачем нужны хуки, и как их использовать, не переписывая наши приложения.

Хуки решают множество, казалось бы, несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, эти проблемы наверняка покажутся вам знакомыми.

Трудно повторно использовать логику состояний между компонентами

В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как рендер-пропсы и компоненты высшего порядка, которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем отфильтровать их в DevTools, всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния.

С помощью хуков вы можете извлечь логику состояния из компонента, чтобы её протестировать или повторно использовать. Хуки позволяют вам повторно использовать логику состояния, не затрагивая дерево компонентов. Благодаря этому, хуки легко использовать в разных компонентах и делиться ими с сообществом.

Мы обсудим это подробнее в разделе Создание собственных хуков.

Сложные компоненты становятся трудными для понимания

Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в componentDidMount и componentDidUpdate . Однако тот же метод componentDidMount может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в componentWillUnmount . Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Это легко приводит к багам и несоответствиям в приложении.

В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика состояния раскидана повсюду. Такие компоненты сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов.

Чтобы решить эту проблему, хуки позволяют разбить один компонент на маленькие функции по их назначению (например, подписке или загрузке данных), а не на основе методов жизненного цикла. Вы также можете контролировать внутреннее состояние с помощью редюсера, чтобы поведение было более предсказуемым.

Классы путают как людей, так и машины

Вдобавок к усложнению организации кода и его повторного использования, классы создают существенный барьер в изучении React. Нужно понимать, как работает this в JavaScript, поведение которого отличается от большинства языков. Приходится помнить про привязку контекста для обработчиков событий. Без использования ES2022 публичных полей класса, код становится многословным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но всё равно путаться с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводят к разногласиям даже между опытными React-разработчиками.

К тому же React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают Svelte, Angular, Glimmer и другие технологии, компиляция компонентов перед их исполнением имеет огромный потенциал в будущем. Особенно, если шаблоны не накладывают ограничений. Недавно мы экспериментировали со свёртыванием компонентов с использованием Prepack и увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизации на нет. Классы создают сложности для инструментов и сегодня. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и часто ломает их. Наша цель — предоставить API, который повысит вероятность того, что код можно будет оптимизировать.

Чтобы решить эти проблемы, хуки позволяют использовать больше возможностей React без написания классов. Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не обесценивают опыт использования React. Хуки предоставляют императивные лазейки и не требуют от вас изучения сложных функциональных или реактивных подходов.

Стратегия постепенного внедрения

TLDR: Мы не планируем удалять классы из React.

Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени изучать новый API каждого релиза. Хуки это что-то новое, и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение.

Мы также понимаем, что планка для добавления новых примитивов в React очень высока. Поэтому для любопытных читателей мы подготовили подробный RFC, в котором можно найти больше информации о технических аспектах выбранного дизайна.

Важно понимать, что хуки работают рядом с существующим кодом, поэтому вы можете внедрять их постепенно. Нет спешки переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь отправить нам свой отзыв, позитивный или негативный.

Мы намерены охватить все возможные варианты использования классов в хуках, но мы всё ещё будем поддерживать классовые компоненты в обозримом будущем. В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами.

Часто задаваемые вопросы

Мы подготовили для вас страницу FAQ с ответами на самые частые вопросы о хуках.

К концу этой страницы вы должны иметь общее представление о том, какие проблемы решают хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! Давайте перейдём на следующую страницу, где мы изучим хуки на примерах.

12 хуков React, которые должен знать каждый разработчик

Хуки React — это многократно используемые части кода. Хуки позволяют инкапсулировать побочные эффекты, компоновать и повторно использовать логику.

Для большинства сценариев использования существуют хуки React. Зачем изобретать колесо, если есть такое огромное количество хуков с открытым исходным кодом, доступные уже сегодня?

1. react-swipeable

react-swipeable — это хук обработчика событий React Swipe. В некоторых случаях react-swipeable необходим для создания React-приложений, ориентированных в первую очередь на мобильные устройства.

Предположим, что вы разрабатываете онлайн-магазин и хотите включить “нативное” мобильное поведение в веб-приложение.

Мобильные пользователи взаимодействуют с приложениями совсем иначе, чем веб-пользователи. В телефонах предусмотрены сенсорные жесты, свайпы, увеличение и уменьшение масштаба и т.д. Почему бы не включить все эти функции в мобильное веб-приложение?

Как это работает

const handlers = useSwipeable( onSwiped: (eventData) => console.log("User Swiped", eventData), 
. config,
>);return 
> swipe here
 ;

Вот все пропсы, к которым вы можете получить доступ при обработке событий:

 onSwiped, // После любого свайпа(SwipeEventData) => void 
onSwipedLeft, // После свайпа ВЛЕВО (SwipeEventData) => void 
onSwipedRight, // После свайпа ВПРАВО(SwipeEventData) => void 
onSwipedUp, // После свайпа ВВЕРХ (SwipeEventData) => void 
onSwipedDown, // После свайпа ВНИЗ (SwipeEventData) => void 
onSwipeStart, // Начало свайпа (SwipeEventData) => void *see details* 
onSwiping, // Во время свайпа (SwipeEventData) => void 
onTap, // После касания (< event >) => void// Передача обратных вызовов, событие предоставлено: (< event >) => void 
onTouchStartOrOnMouseDown, // Вызывается для `touchstart` и `mousedown` 
onTouchEndOrOnMouseUp, // Вызывается для `touchend` и `mouseup`
>

Информацию об интеграции и использовании можно найти на странице react-swipeable на сайте NPM.

2. use-resize-observer

use-resize-observer — это React-хук, который позволяет измерять ширину и высоту элемента .

Этот хук невероятно удобен при работе с обрезкой, редактированием, обработкой изображений и т.д.

Как использовать

import React from "react";
import ReactDOM from "react-dom";
import useResizeObserver from "use-resize-observer";
import "./styles.css";

const App = () => const < ref, width, height >= useResizeObserver();
return (

Try resizing this div!

 
className="box">
x


)>;

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Дополнительные инструкции можно найти здесь.

3. formik

Formik берет на себя повторяющуюся и утомительную часть работы с формами.

Он отслеживает значения, ошибки, посещенные поля, оркестрирует валидацию и обрабатывает отправку — все, с чем вам больше не придется иметь дело. Тратьте меньше времени на подключение обработчиков состояния и изменений.

Как это работает

Допустим, вам нужно добавить форму регистрации в рассылку новостей для блога. Для начала в форме будет только одно поле с именем email . С Formik для этого требуется лишь несколько строк кода.

import React from 'react';
import < useFormik >from 'formik';
const SignupForm = () => // Передача хуку useFormik() начальных значений формы и функции submit, которая будет 
// вызвана после отправки формы 
const formik = useFormik( initialValues: email: '',
>,
onSubmit: values => alert(JSON.stringify(values, null, 2)); 
>,
>);
return (
>
Email Address
 name="email" 
type="email" 
onChange= 
value=  
/> 
Submit 

);
>;

Источник примера. Информацию об интеграции и использовании можно найти в документации Formik.

4. use-debounce

Дебаунсинг (debouncing) в JavaScript — это шаблон, используемый для повышения производительности браузера.

На веб-странице может быть некоторая функциональность, требующая трудоемких вычислений. Например, загрузка изображений, несколько вызовов API и т.д.

Если такие методы будут вызываться слишком часто, это сильно повлияет на производительность браузера.

Дебаунсинг — это практика программирования, которая гарантирует, что трудоемкие задачи не будут вызываться так часто.

Как это работает

import React, < useState >from 'react';
import < useDebounce >from 'use-debounce';
export default function Input() const [text, setText] = useState('Hello'); 
const [value] = useDebounce(text, 1000); 
return ( 
 
 defaultValue= 
onChange=  setText(e.target.value); 
>> 
/> 
Actual value: 
Debounce value: 
 
);
>

Дополнительную информацию можно найти на странице use-debounce .

5. use-isomorphic-layout-effect

В React есть множество встроенных хуков. Одним из них является useLayoutEffect .

Вот что говорится в документации React о useLayoutEffect :

Сигнатура useLayoutEffect идентична сигнатуре useEffect , но первый хук срабатывает синхронно после всех изменений DOM.

Другими словами, вы можете использовать useLayoutEffect только для браузера. Это проблема, если вы рендерите код React на стороне сервера. Например, при использовании NextJS вы получите следующее сообщение об ошибке:

Предупреждение: useLayoutEffect не действует на сервере, потому что его эффект не может быть закодирован в формат вывода рендерера сервера.

Чтобы избежать этого сообщения об ошибке, используйте useLayoutEffect только в компонентах, рендеринг которых осуществляется исключительно на стороне клиента.

Устранить проблему поможет useIsomorphicLayoutEffect , который переключается между useEffect и useLayoutEffect в зависимости от среды выполнения.

Как использовать

+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';- import < useLayoutEffect >from 'react';const YourComponent = () => + useIsomorphicLayoutEffect(() => // ваша реализация
>, []);- useLayoutEffect(() => // your implementation 
>, []);>;

Больше информации представлено на странице пакета NPM.

6. swr

swr — это библиотека React Hooks для получения данных. Ее название происходит от stale-while-revalidate (ресурс считается устаревшим после запроса).

stale-while-revalidate — это стратегия аннулирования кэша, доступно изложенная в HTTP RFC 5861.

Как использовать

import useSWR from 'swr'function Profile() const < data, error >= useSWR('/api/user', fetcher)if (error) return 
failed to load
 
if (!data) return 
loading.
 return 
hello !>

swr сначала возвращает данные из кэша (устаревшие), отправляет запрос (повторная проверка) и предоставляет обновленные данные.

Этот хук значительно упрощает логику получения данных. Он также пригодится для оптимизации скорости, корректности и стабильности работы и поможет создавать отличные приложения.

Посредством swr все компоненты будут получать поток обновлений данных постоянно и автоматически. Пользовательский интерфейс станет быстрым и реактивным.

Ознакомиться с полной документацией и примерами можно на сайте swr.vercel.app.

7. react-hotkeys-hook

react-hotkeys-hook предназначен для использования горячих клавиш в компонентах. Хук позволяет прослушивать горячие клавиши декларативным образом и выполнять функцию обратного вызова, как только пользователь нажмет на заданную горячую клавишу.

Как это работает

import < useHotkeys >from 'react-hotkeys-hook';function ExampleComponent() useHotkeys('a', () => alert('Key a was pressed'))return ( 
Press the a key to see it work. 
)

react-hotkeys-hook также прослушивает нажатия комбинаций клавиш, которые позволяют пользователю выполнить обратный вызов. Представим, что в нашем приложении есть горячие клавиши для обеспечения функциональности. Например, для создания тикета в Jira нужно нажать shift+c .

import < useHotkeys >from 'react-hotkeys-hook';
function CreateIssue() const [showIssueCreatorModal, setShowIssueCreatorModal] = useState(false)
useHotkeys('shift+c', () => setShowIssueCreatorModal(true))
return ( 
<> 
MODAL CONTENT