Хуки — это части кода, которые могут быть использованы неоднократно. Они позволяют использовать состояние и другие возможности React без создания классов. А также хуки способны инкапсулировать побочные эффекты.
Можно создавать хуки самостоятельно, но самые нужные уже есть в React по умолчанию. Ловите полезный список ⬇️
▪️ useContext
позволяет подписываться на контекст React;
▪️ react-hotkeys-hook
предназначен для использования горячих клавиш в компонентах, выполняет функцию обратного вызова, как только пользователь нажимает на заданную клавишу;
▪️ useState
управления состоянием компонентов;
▪️ useEffect:
предназначен для перехвата различного рода изменений в компонентах, которые нельзя обработать внутри компонентов;
▪️ react-scroll-parallax
создаёт эффекты параллакс-скроллинга для изображений и любых других элементов DOM;
▪️ useImperativeHandle
настраивает объект, который при использовании ref передается родительскому компоненту;
▪️ useMemo
управления мемоизированными (кэшированными) значениями;
▪️ useInsertionEffect
работает с библиотеками, которые используют CSS в JS, помогает оптимизировать и внедряь стили при рендеринге;
▪️ react-script-hook
подходит для динамической загрузки внешнего скрипта, а также незаменим при работе со сторонними API;
▪️ useSyncExternalStore синхронизирует данные с внешним хранилищам.
Важно! Хуки имеют ряд ограничений:
— вызываются только на верхнем уровне компонента и из функциональных компонентов React или из других хуков;
— нельзя вызывать внутри условных конструкций, циклов и стандартных функций JS.
#советы_от_methed