хук что это в программировании

Хуки в PHP, принцип работы

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

В данной статье я расскажу принцип — как работают хуки в PHP. Использовать хуки можно в любом веб-приложении, например тот, кто работает с WordPress постоянно с ними сталкивается. Использование хуков дает гибкость приложению и позволяет сторонним разработчикам расширять функционал без вмешательства в основной код.

Рассмотрим простой пример

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

Чаще всего возникает необходимость дополнить HTML шаблон мета-тегами, стилями, скриптами в шапке или в подвале.

Пусть существует следующий шаблон страницы:

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

Код приобретет следующий вид:

Как do_action узнает какие функции нужно выполнить

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

Пусть массив имеет следующий вид:

Получается, что есть списки, которые складываются в один большой список, где hook_name_x — это название какого-то хука, index_x_x — индекс(порядковый номер) функции function_name_x_x в списке указанного хука.

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

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

Привязка функции к хуку

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

Источник

Windows hook: просто о сложном

Что такое хук?
Что такое хук функций и для чего он нужен? В переводе с английского «hook» — ловушка. Поэтому о назначении хуков функции в Windows можно догадаться — это ловушка для функции. Иными словами, мы ловим функцию и берем управление на себя. После этого определения нам открываются заманчивые перспективы: мы можем перехватить вызов любой функции, подменить код на свой, тем самым изменив поведение любой программы на то, которое нам нужно (конечно, в рамках определенных ограничений).

Целью данной статьи является демонстрация установки хука и его непосредственная реализация.

— Нельзя поверить в невозможное!
— Просто у тебя мало опыта, – заметила Королева. – В твоем возрасте я уделяла этому полчаса каждый день! В иные дни я успевала поверить в десяток невозможностей до завтрака!

Где мне реально пригодились эти знания

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

• Контроль входящего http-траффика и подмена «взрослого» контента на более безобидный.
• Логирование информации в случае копирования каких-либо файлов с подконтрольной сетевой папки.
• Незначительная модификация кода в проекте, от которого были утеряны исходники (да, и такое тоже случается)

Методы установки хуков

Давайте перейдем от общих фраз к более детальному рассмотрению хуков. Мне известно несколько разновидностей реализации хука:

● Использование функции SetWindowsHookEx. Это весьма простой, оттого и ограниченный, метод. Он позволяет перехватывать только определенные функции, в основном связанные с окном (например, перехват событий, которые получает окно, щелчков мышкой, клавиатурного ввода). Достоинством этого метода является возможность установки глобальных хуков (например, сразу на все приложениях перехватывать клавиатурный ввод).
● Использование подмены адресов в разделе импорта DLL. Суть метода заключается в том, что любой модуль имеет раздел импорта, в котором перечислены все используемые в нем другие модули, а также адреса в памяти для экспортируемых этим модулем функций. Нужно подменить адрес в этом модуле на свой и управление будет передано по указанному адресу.
● Использование ключа реестра HKEY_LOCAL_MACHINE\Software\Microsoft\Windows NT\CurrentVersion\Windows\AppInit_Dlls. В нем необходимо прописать путь к DLL, но сделать это могут только пользователи с правами администратора. Этот метод хорош, если приложение не использует kernel32.dll (нельзя вызвать функцию LoadLibrary).
● Использование инъектирования DLL в процесс. На мой взгляд, это самый гибкий и самый показательный способ. Его-то мы и рассмотрим более подробно.

Инъектирование возможно, потому что функция ThreadStart, которая передается функции CreateThread, имеет схожую сигнатуру с функцией LoadLibrary (да и вообще структура dll и исполняемого файла очень схожи). Это позволяет указать метод LoadLibrary в качестве аргумента при создании потока.

Алгоритм инъектирования DLL выглядит так:

1. Находим адрес функции LoadLibrary из Kernel32.dll для потока, куда мы хотим инжектировать DLL.
2. Выделяем память для записи аргументов этой функции.
3. Создаем поток и в качестве ThreadStart функции указываем LoadLibrary и ее аргумент.
4. Поток идет на исполнение, загружает библиотеку и завершается.
5. Наша библиотека инъектирована в адресное пространство постороннего потока. При этом при загрузке DLL будет вызван метод DllMain с флагом PROCESS_ATTACH. Это как раз то место, где можно установить хуки на нужные функции. Далее рассмотрим саму установку хука.

Подход, используемый при установке хука, можно разбить на следующие составные части:

1. Находим адрес функции, вызов которой мы хотим перехватывать (например, MessageBox в user32.dll).
2. Сохраняем несколько первых байтов этой функции в другом участке памяти.
3. На их место вставим машинную команду JUMP для перехода по адресу подставной функции. Естественно, сигнатура функции должна быть такой же, как и исходной, т. е. все параметры, возвращаемое значение и правила вызова должны совпадать.
4. Теперь, когда поток вызовет перехватываемую функцию, команда JUMP перенаправит его к нашей функции. На этом этапе мы можем выполнить любой нужный код.

Далее можно снять ловушку, вернув первые байты из п.2 на место.

Итак, теперь нам понятно, как внедрить нужную нам DLL в адресное пространство потока и каким образом установить хук на функцию. Теперь попробуем совместить эти подходы на практике.

Наше тестовое приложение будет довольно простым и написано на С#. Оно будет содержать в себе кнопку для показа MessageBox. Для примера, установим хук именно на эту функцию. Код тестового приложения:

В качестве инъектора рассмотрим два варианта. Инъекторы, написанные на С++ и С#. Почему на двух языках? Дело в том, что многие считают, что С# — это язык, в котором нельзя использовать системные вещи, — это миф, можно :). Итак, код инъектора на С++:

Теперь тоже самое, но только на С#. Оцените, насколько код более компактен, нет буйства типов (HANDLE, LPVOID, HMODULE, DWORD, которые, по сути, означают одно и тоже).

Теперь самое интересное — код библиотеки, которая устанавливает хуки. Эта библиотека написана на С++, пока без аналога на C#.

Ну и несколько картинок напоследок. До установки хука:

В следующем нашей материале мы постараемся написать код библиотеки, которая устанавливает хуки на C#, т. к. механизм инъектирования управляемого кода заслуживает отдельной статьи.

Источник

Краткий обзор хуков

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

Хуки — обратно совместимы. На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдёт опытным пользователям React. В конце каждого раздела есть вот такой жёлтый блок с детальным объяснением на случай, если вы запутались:

Если вы хотите понять, почему мы добавляем хуки в React, прочтите мотивацию.

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

В этом примере, useState — это хук (определение хука дано ниже). Мы вызываем его, чтобы наделить наш функциональный компонент внутренним состоянием. React будет хранить это состояние между рендерами. Вызов useState возвращает массив с двумя элементами, который содержит: текущее значение состояния и функцию для его обновления. Эту функцию можно использовать где угодно, например, в обработчике событий. Она схожа с this.setState в классах, но не сливает новое и старое состояние вместе. Сравнение хука useState и this.state приводится на странице Использование хука состояния.

Объявление нескольких переменных состояния

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

Хуки — это функции, с помощью которых вы можете «подцепиться» к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов — они дают вам возможность использовать React без классов. (Мы не рекомендуем сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать хуки в своих новых компонентах.)

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

К примеру, этот компонент устанавливает заголовок документа после того, как React обновляет DOM:

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

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

Вы можете узнать больше о useEffect на странице Использование хука эффекта.

Хуки — это функции JavaScript, которые налагают два дополнительных правила:

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

Вы можете узнать больше на странице Правила хуков.

💡 Создание собственных хуков

Иногда нужно повторно использовать одинаковую логику состояния в нескольких компонентах. Традиционно использовались два подхода: компоненты высшего порядка и рендер-пропсы. С помощью пользовательских хуков эта задача решается без добавления ненужных компонентов в ваше дерево.

Прежде всего, давайте извлечём эту логику в пользовательский хук useFriendStatus

Хук принимает friendID в качестве аргумента и возвращает переменную, которая показывает, в сети наш друг или нет.

Теперь мы можем использовать этот хук в обоих наших компонентах:

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

Пользовательские хуки — это в большей степени соглашение, чем дополнение. Если имя функции начинается с ” use ” и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться соглашения useSomething при именовании хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки.

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

А хук useReducer даёт возможность управлять внутренним состоянием более сложного компонента с помощью редюсера.

Вы можете узнать больше обо всех встроенных хуках на странице API-справочника хуков.

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

Вы также можете просмотреть API-справочник хуков и FAQ хуков.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор хуков — хорошее начало для изучения хуков.

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

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

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

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

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

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

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

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

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

Источник

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

Хуки — это технология, которая перехватывает вызовы функций и помогает использовать возможности React без написания классов.

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

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

Встроенные хуки

Хуки можно создавать самостоятельно, но в React существует ряд встроенных хуков, которыми можно пользоваться прямо сейчас.

useState()

Хук состояния — useState() — добавляет динамическую логику функциональных компонентов:

Хук возвращает функцию и значение состояния для обновления.

Пример. Рендеринг счетчика. При нажатии на кнопку его значение увеличится:

Функциональный компонент наделяется внутренним состоянием, которое будет сохраняться между рендерами.

useCallback()

Хук useCallback() оптимизирует рендеринг компонентов:

А также возвращает мемоизированную версию Callback (когда результат выполнения сохраняется). При этом массив зависимостей не передается.

useContext()

Хук useContext() передает данные дочерним элементам:

А также возвращает текущее значение контекста.

useMemo()

Хук useMemo() позволяет запоминать функции без необходимости их вызова при каждом новом рендеринге:

А еще — возвращает мемоизированное значение.

useEffect()

Хук эффекта — useEffect() — выполняет в компонентах функций такие эффекты как вызов API, запросов и подобные:

Пример. Установка компонентом заголовка документа после обновления DOM:

React запускает функции с эффектами после каждого рендера.

useReduce()

useRef()

Хук useRef() создает изменяемую переменную (упрощает доступ к элементам React и узлам DOM):

Хук возвращает ref-объект, который будет сохраняться в течение времени жизни самого компонента.

useImperativeHandle()

Пример. Использование useImperativeHandle с forwardRef:

Хук useImperativeHandle() контролирует возвращаемое значение. Довольно часто этот хук используют в библиотеках компонентов, где нужна кастомизация поведения элементов DOM.

useDebugValue()

Хук useDebugValue() отображает значение для отладки.

Пример. Создание своего React-хука:

Хук useDebugValue() будет вызван тогда, когда будет открыт React DevTools.

useLayoutEffect()

Хук useLayoutEffect() запускается в React только после фиксации в DOM всех обновлений.

Правила хуков

Как создать хуки?

Пусть в компоненте, принадлежащем чату (приложению), отображается уведомление о нахождении пользователя «В сети»:

Давайте сделаем имена пользователей из списка контактов, которые находятся онлайн, зелеными.

Чтобы решить эту задачу, в компонент FriendListItem можно скопировать логику, которая приведена выше:

Конечно, этот способ совсем не простой и короткий.

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

Разделить логику между двумя функциями JavaScript можно, если извлечь ее в еще одну, третью функцию.

Первый пользовательский хук — useFriendStatus() :

Этот хук подписывает нас на статус пользователя. friendID является здесь аргументом:

Что здесь произошло? Мы извлекли код из двух функций и поместили в отдельную функцию.

Важно! Используйте use в начале каждого хука. Это нужно для автоматической проверки правил хуков.

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

Как мы уже говорили, хуки — это те же функции. А потому можно передавать информацию между ними.

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

Идентификатор пользователя сохраняется в recipientID и обновляется в случае выбора в другого пользователя.

Так можно узнать, находится ли пользователь в сети.

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

Ограничения при использовании хуков

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

Например, в одном компоненте можно использовать сразу несколько хуков эффектов или состояний:

React определяет порядок, при котором вызываются хуки. Именно так он узнает, какому useState() какое состояние соответствует. Поскольку в примере порядок вызовов одинаков при каждом рендере, он является рабочим:

Но что получится, если поместить хук в условие?

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

Компоненты чаще всего определяются как обычные функции:

Также они могут определяться в виде стрелочных функций:

Как подключать хуки

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

Заключение

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

Кастомные хуки позволяют быстрее и легче шейрить логику (она сразу закладывается в хуки). Это ведет к уменьшению вложенности дерева компонентов. React получает возможность пристальнее отслеживать изменения в компонентах.

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

Без них такая логика при наличии нескольких побочных эффектов в компоненте разбивалась бы на разные методы жизненного цикла. А благодаря мемоизации компоненты не будут обновлены или пересозданы. В memo можно поместить все функциональные компоненты.

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

Источник