Что такое крючки в React JS

Что такое крючки в React JS 🪝?

Хуки — это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности react без написания класса.
Использование хуков в компонентах класса react больше не нужно.

Как использовать хук в react?

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

В React JS есть три основных хука:

1. useState 🌟
2. useEffect 🌟
3. useContext

хук useState

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

import { useState } from 'react';

Мы инициализируем useState, передавая в функцию значение по умолчанию. useState принимает начальное состояние и возвращает два значения

1. Текущее состояние
2. Функция для изменения состояния.

import { useState } from 'react'

function Fun() {
    const [name, setName] = useState("state hook");
}

Пример useState

хук useEffect

Хук useEffect позволяет вам выполнять побочные эффекты в ваших функциональных компонентах.

Что означает побочный эффект? Например, получение данных из API, обновление DOM, таймеры и т.д…..

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

Если вы не передадите второй параметр, useEffect будет выполняться при каждом рендере.
Если вы передадите пустой массив [], useEffect будет выполняться только при первом рендере.
Если вы передадите какой-либо prop или state в качестве зависимости, то useEffect будет выполняться при первом рендере и каждый раз, когда зависимость изменится.

Пример useEffect