В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках. Мы используем React для создания переиспользуемых компонентов, которые могут логично использоваться для создания UI. Создание компонентов в React также просто, как и создание функций 🤩 . Для примера 👇🏻, ниже показан простой react компонент, в который мы отправляем данные как аргумент, который можно легко указать внутри функции. Состояние – это место, в котором хранятся данные, предназначенные для компонента. Когда состояние меняется, компонент начинает перерисовываться, что позволяет нам управлять измененными данными в приложении.  Теперь давайте узнаем о состоянии при использовании useState(). Совет: используйте состояние только внутри компонентов. Но вы не можете обновлять значение состояния используя оператор “=”, т.к. это хоть и изменит значение, но не запустит перерисовку компонента. React хочет, чтобы вы передавали значение через функцию setState, для обновления состояния. Вы можете передавать функцию в useState, в такой ситуации первоначальное значение будет равно тому, что возвращает данная функция, это полезно, когда вы используете как начальное значение задачу, которая требует значительных вычислений. Вы можете использовать функцию, когда вам нужно обновить состояние основываясь на данных, которые в данный момент находятся в состоянии. useEffect хук имеет 2 части, первая – это функция, и вторая – это массив зависимости, что является опциональным. Мы будем получать console log каждый раз, когда состояние будет меняться.К примеру, если вы имеете 2 состояния внутри компонента, и один из них изменился, то мы сразу получим console.log, а это то, что мы обычно не хотим. Примечание: первый вызов useEffect() будет сразу после того, как ваш компонент будет вмонтирован в DOM. Мы можем указывать состояние внутри массива зависимости у useEffect, чтобы он отслеживал только те изменения состояний, которые были указаны внутри массива. Напоминание: не обновляйте состояние внутри useEffect без продуманной логики, иначе это может вызвать бесконечный круг перерисовок. Внутри useEffect всегда можно вернуть функцию очистки, которая используется для удаления нежелательного поведения. Функция очистки вызывается не только перед размонтированием компонента, но и перед выполнением следующего эффекта, прочтите для деталей (на английском). Вы можете получать данные из api как в примере 👇🏻. Контекст api позволяет передавать данные в дочерние компоненты без указывания их в props. Вы можете обернуть родительский компонент в Context.Provider и использовать его внутри функции Context.Consumer. Что же делает useContext? Он заменяет Context.Consumer и позволяет нам получать данные используя useContext. Посмотрите на пример 👇🏻. Подробнее. useReducer используется для управления состоянием в React, это, отчасти, схоже с функцией reduce в javascript. Мы также можем усложнить задачу, превратив наше состояние в объект. Или, мы можем использовать несколько useReducer. useReducer более предпочтителен нежели useState когда у вас сложная логика, которая включает в себя несколько значений, или когда обновляемое состояние зависит от предыдущего. useReducer также позволяет оптимизировать компонент, так как вы можете передавать dispatch из вне вместо коллбэка. Используя вместе useContext и useReducer мы можем управлять глобальным состояние на любом уровне в дереве компонентов, давайте взглянем на пример 👇🏻. Оба состояние буду изменены одновременно. Давайте посмотри на код и попытаемся понять поведение функций в React. Когда мы запустим код мы увидим “false” в логах. Теперь, взглянув на пример, давайте попробуем понять, как мы можем использовать useCallback. Когда вы посмотрите на console.log в браузере, вы увидите, что сразу происходит отрисовка всех трёх компонентов, но по нажатию на любую кнопку только 2 компонента перерисуются. Примечание: здесь мы используем React.memo(), вот почему ChildrenC не перерисовывается, т.к. props не изменяются. Но почему же при изменении ChildrenA ChildrenB также перерисовывается? Причина в том, что при перерисовке родительского компонента функция handleClick не таже самая. Я объяснял это в пункте выше, описывая как React определяет изменения в props. Вот почему перерисовываются сразу ChildrenA и ChildrenB. Для решения этой проблемы мы будем использовать useCallback. useCallback возвращает memoized callback (мемоизированную функцию, функцию, которая измениться только тогда, когда один из пунктов внутри массива зависимостей изменится).useCallback принимает в себя функцию и массив зависимостей, также как и useEffect. Давайте изменим наш родительский компонет, и посмотрим на логи. Теперь вы можете убедиться, что “все в шоколаде” 👇🏻. useCallback возвращает мемоизированную функцию, наравне с этим useMemo возвращает мемоизированное значение. Для примера, нам нужно найти факториал, и пересчитывать значение только тогда, когда значение изменится, а не при каждой перерисовке компонента, чтож давайте попробуем использовать useMemo. Давайте выведем useRef в консоль, и посмотрим, что он возвращает. useRef возвращает изменяемый ref объект, в котором значение “current” устанавливается переданным аргументом при инициализации (initialValue). Возвращенный объект будет сохранен на протяжении всей жизни компонента. Когда вы сравнивает обычный объект с самим собой в useEffect, то после перерисовки они не совпадают, и это запускает срабатывание useEffect, с useRef такого не происходит, вы можете убедиться это на примере ниже 👇🏻. 🥳🥳🥳🥳  Поздравляю!!!Мы охватили все важные хуки. Спасибо за прочтение!