Отлаживайте хуки Reactjs с легкостью !!

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

Теперь использование useEffect, useCallback, useMemo действительно помогло мне хорошо составить логику. Но когда список зависимостей становится длинным. Когда я говорю «долго», для меня это может быть любое значение больше 3, а для других - более или менее.

С этим большим массивом зависимостей мне было действительно сложно отладить и выяснить, что заставляет мой useEffect снова запускаться (то же самое для useCallback и useMemo). Я знаю две стратегии отладки:

1. Разбейте логику useEffect на несколько useEffect. Это все еще в порядке, но опыт и временные ограничения могут быть разными, и в настоящий момент это может быть неэффективное решение. Люди не будут сначала разбивать логику useEffect на более мелкие части, они сначала попытаются потратить время на использование console.log и добавление отладчика для отладки поведения. Никто не хочет, чтобы их изменения вызывали регресс, разбивая логику usEffect на несколько useEffects.

2) Используйте хук usePrevious, который можно определить примерно так

И можно употреблять так:

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

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

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

Пакет также можно использовать с плагином babel, который упрощает отладку.

1. Запустить

npm i @simbathesailor/use-what-changed --save-dev

2. Беги

npm i @simbathesailor/babel-plugin-use-what-changed --save-dev

Добавьте запись плагина в свои конфигурации babel

{
  "plugins": ["@simbathesailor/babel-plugin-use-what-changed"]
}

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

Теперь приступим к отладке useEffect, useMemo или useCallback. Вы можете сделать что-то вроде этого:

// uwc-debug
React.useEffect(() => {
  // console.log("some thing changed , need to figure out")
}, [a, b, c, d]);
// uwc-debug
const d = React.useCallback(() => {
  // console.log("some thing changed , need to figure out")
}, [a, b, d]);
// uwc-debug
const d = React.useMemo(() => {
  // console.log("some thing changed , need to figure out")
}, [a]);

Нет необходимости добавлять импорт для использования того, что изменилось. просто добавьте комментарий // uwc-debug ’над вашими хуками, и вы должны начать видеть консоли отладки с использованием того, что изменилось.

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

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

If using npm. Run:
npm i @simbathesailor/use-what-changed --save
If using yarn. Run:
yarn add @simbathesailor/use-what-changed

Примечание. Эта ловушка регистрируется только в среде разработки. Для принятия решения он использует стандартный process.env.NODE_ENV. Откройте вкладку консоли разработчика, чтобы увидеть логи.

1. Когда в качестве единственного аргумента передается только зависимость

На снимке выше показан журнал консоли при изменении b и c в приведенном выше примере кода.

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

3. Цветовая кодировка

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

Если вам нужно проверить его в действии и вы хотите поэкспериментировать. Перейти по ссылке ниже коды и ящик

Это была моя попытка решить проблемы с отладкой хуков reactjs. Надеюсь это поможет. Не стесняйтесь обращаться ко мне по вопросам в твиттере или github для обсуждения.

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

Мой профиль в твиттере:

ссылка на пакет npm use-what-changed:

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