​​#урок дня

Дэн Абрамов в своей статье о хуках в React говорит нам: «Не врите Реакту о зависимостях хука, указывайте все».

ESlint вторит ему: Этот код нужно исправить.

Но я же умный и без сопливых знаю точные зависимости, поэтому:
// eslint-disable-next-line react-hooks/exhaustive-deps

Мой UI тем временем ведёт себя вот так…

P. S. обратили внимание на ссылку с подсветкой текста? Завтра будет фишка по этому поводу.

P. P. S. Перевод статьи доступен на Хабре, но учтите, что материала там минут на сорок, на любом языке: https://m.habr.com/en/company/ruvds/blog/445276/

#react #hooks #useeffect #eslint

#фишка дня

Если вам в React потребовалось по требованию ESLint включить в зависимости useEffect не только нечто внешнее, но и текущий внутренний стейт, вы гарантированно получите бесконечный цикл и переполнение буфера.

Чтобы этого не произошло, ставьте ссылку на стейт, а не сам стейт. И всё. Пример на скриншоте.

Вышеупомянутое ESLint-правило react-hooks/exhaustive-deps действительно может раздражать (мы ведь все умнее машины, правда?), но количество ошибок проектирования, от которых оно избавляет, несчётно: https://typeofnan.dev/you-probably-shouldnt-ignore-react-hooks-exhaustive-deps-warnings/

#react #js #hooks

#видео дня

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

React 18 принёс ещё больше вопросов (отчасти ещё и потому, что документация сильно отстаёт и изначально неверна).

Так что я, конечно, настоятельно рекомендую почитать Дэна Абрамова: https://overreacted.io/a-complete-guide-to-useeffect/

Есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/445276/

А чтобы добить знания — глянуть видео о useEffect и его современном значении и правильном применении: https://www.youtube.com/watch?v=HPoC-k7Rxwo

#react #hooks #useeffect

#заметка дня

Иногда полезно спорить с мэтрами по поводу разных штук. Не стоит всё подряд принимать на веру.

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

То бишь, вместо:

useEffect(() => {
  // do stuff
}, [...deps]);

Предлагается

useEffect(function doSomething() {
  // do stuff
}, [...deps]);

На первый взгляд выглядит разумно, не правда ли?

Самодокументирующийся код без комментариев, хорошо видно намерение, сразу понятно, используется или нет.

Так вот, товарищи. Это далеко не самое лучшее решение, да ещё и многословное. Гораздо более разумно будет создать свой собственный хук.

Что такое свой собственный хук? Вы не поверите, это буквально тот же самый useEffect, но вынесенный в функцию:

function useDoSomething(deps) {
  useEffect(() => {
    // some effect
  }, [...deps]);
}

Да, внутри функции кастомного хука можно держать useState, обращаться к внешним источникам данных и возвращать что угодно. Это, например, рекомендуемый способ использования того же React Query и официальная рекомендация команды React для переиспользования логики: https://react.dev/learn/reusing-logic-with-custom-hooks

Почему такой подход лучше?

Потому что, обладая всеми преимуществами варианта, предложенного Кори, он не только сокращает размер основного компонента но и легко тестируется!

Да, представьте себе, вы задолбаетесь правильно тестировать компонент с даже двумя-тремя встроенными хуками. А вынесенные отдельно — не только легко мокаются и подменяются, но и прекрасно тестируются сами по себе.

Так что команда React могла бы назвать раздел документации не "как переиспользовать", а "как тестировать". Это важнее.

В общем, не забываем про голову, котаны. Готов выслушать ваши сомнения, впрочем 🙂

#react #javascript #hooks

#инструмент дня

А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования?

Не просто десктоп-мобила, а наличие, отсутствие и скорость сети, число процессоров, объём памяти, поддержку видеокодеков... далее — везде.

Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks

Естественно, все эти хуки умеют определять, запущены они в SSR или нет.

Куча демок в наличии.

К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: https://t.me/htmlshit/2347

#react #hooks