Learn more: react hooks

[azinit]

• [x] Введение в React Hooks
  • [x] Тестирование React Hooks?
• [x] Custom hooks: practice
• [x] React- Your First Custom Hook
• [x] useCookies hook example
• [x] React Docs
  • [x] Введение в хуки
  • [x] Краткий обзор хуков
  • [x] Использование хука состояния
  • [x] Использование хука эффекта
  • [x] Правила хуков
  • [x] Создание пользовательских хуков
  • [x] Справочник API хуков
  • [x] Хуки: ответы на вопросы
• [x] useFetch: React custom hook for Fetch API with Suspense and Concurrent Mode in Mind
• [x] Заменяют ли хуки в React Redux?
• [x] denis/react-hooks-example
• [x] Ознакомиться с https://usehooks.com/
  • [x] page 1
  • [x] page 2
  • [x] page 3
• [x] Making Sense of React Hooks
• [x] How to fetch data with React Hooks?
• [x] Переиспользование
• [x] Преимущества/недостатки

[azinit]

Как декомпозировали логику до хуков?

• HOCs
• renderProps

[azinit]

Цель хуков

1. Разделить логику от UI

2. Hooks нацелены на решение всех этих проблем, позволяя вам писать функциональные компоненты, которые имеют доступ к state, context, методам жизненного цикла, ref и т. д., без написания классов.

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

Решаемые проблемы

src: https://medium.com/@nazrhan.mohcine/react-hooks-why-what-and-pros-vs-cons-6d3fe18b8a0a

• "Ад оберток" (вызванных паттернами проектирования: HOCs, render props, props driling)
• Огромные компоненты (сложные для тестирования, поддержки и совместного размещения кода)
• Запутывающие классы (this, реюзабилити)

[azinit]

Библиотеки/коллекции хуков

• react-use, библиотека, которая поставляется с кучей React Hooks.
• На этом сайте собрана коллекция React Hooks.
• use-persisted-state

[azinit]

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

• Хуки следует вызывать только на верхнем уровне. Не вызывайте хуки внутри циклов, условий или вложенных функций.
• Хуки следует вызывать только из функциональных компонентов React. Не вызывайте хуки из обычных JavaScript-функций. Есть только одно исключение, откуда можно вызывать хуки — это ваши пользовательские хуки. Мы расскажем о них далее.

Плагин: https://www.npmjs.com/package/eslint-plugin-react-hooks

[azinit]

Как методы жизненного цикла соответствуют хукам?

[azinit]

Тестирование

react-hooks-testing-library

• Github
• Docs
• Usage example

Manual approach

• https://kentcdodds.com/blog/how-to-test-custom-react-hooks
• https://medium.com/javascript-in-plain-english/testing-react-hooks-be74ec3fc0c4

[azinit]

Community hooks (top interested)

All hooks: https://usehooks.com

• useWhyDidYouUpdate
• useKeyPress
• usePrevious
• useHover

src: https://www.robinwieruch.de/react-hooks-fetch-data

• useFetchApi

[azinit]

Преимущества

src: https://blog.bitsrc.io/simple-code-reuse-with-react-hooks-432f390696bf src: https://medium.com/@nazrhan.mohcine/react-hooks-why-what-and-pros-vs-cons-6d3fe18b8a0a

• Пользовательские хуки - простые функции, так что легко понять что они делают
• Не нужно возиться с this. Это становиться болью, биндить функцию, когда мы используем их как обработчики событий
• Синтаксис гораздо короче, что означает - меньшее пространство для скрытых багов
• Состояние теперь более гранулярное. Вместо большого объекта-состояния, мы можем использовать несколько маленьких хуков, каждый из которых имеет дело с их собственным отдельным стейтом. И наши компоненты используют их все вместе. Этот путь позволяет избегать мерджа стейта со старым стейтом и предотвратить ненужные переопределения
• Альтернатива общим паттернам проектирования
• Легче для тестирования, поддержки, использования и переиспользования
• Позволяет создавать реюзабельные и изолированные компоненты для предотвращения лишней логики

Недостатки

src: https://medium.com/@mateuszroth/react-hooks-advantages-and-comparison-to-older-reusable-logic-approaches-in-short-f424c9899cb5 src: https://www.reddit.com/r/reactjs/comments/9suobg/why_the_hate_for_react_hooks/ src: https://medium.com/ackee/what-i-dont-like-about-react-hooks-e6ec7da863d5 src: https://blog.logrocket.com/frustrations-with-react-hooks/

• Без линтер-плагина сложно следовать всем правилам хуков
• Нужно немало времени, чтобы начать пользовать правильно (см. пример [kentcdodds] (https://kentcdodds.com/blog/usememo-and-usecallback))
• Поскольку легок для начинания - больше новичков приходят и плодят ошибки
• Много сайдэффектов, т.к. поначалу может показаться сложным изучать хуки (после классов)
• Может не совпадать с вашей ментальной моделью для абстракций и декомпозиции
• По мнению многих экспертов - представляет некорректный дизайн для проектирования.

[azinit]

Про использование

• Оптимально - писать максимально потенциально переиспользуемый хук
  • а не для конкретного компонента

- useNavItem
+ useLocalStorage

src: https://levelup.gitconnected.com/5-ways-to-simplify-your-react-hooks-fbedb406eee0

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