Що роблять хуки?

ReactJunior~1 хв читання

Що саме роблять хуки

1. `useState` - зберігає стан

Дозволяє компоненту "запам'ятовувати" значення між рендерами.

javascript

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // стан
  return (
    <button onClick={() => setCount(count + 1)}>
      Натиснули {count} раз
    </button>
  );
}

React "запам'ятовує" значення count для кожного екземпляра компонента і перемальовує його при зміні.

2. `useEffect` - виконує побічні ефекти

Відповідає за дії, які не пов'язані напряму з рендером:

запити до API,
підписки,
таймери,
робота з DOM.

javascript

useEffect(() => {
  console.log("Компонент змонтовано");
  return () => console.log("Компонент видалено");
}, []);

useEffect з порожнім масивом виконується один раз при монтуванні і повертає "чистку" при демонтуванні.

3. `useContext` - підключає контекст

Дозволяє отримати дані з контексту без пропсів.

javascript

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Button />
    </ThemeContext.Provider>
  );
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Тема: {theme}</button>;
}

Замість "прокидання" пропсів через багато рівнів можна напряму отримати потрібне значення.

4. `useRef` - зберігає посилання на DOM або значення між рендерами

javascript

function InputFocus() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus(); // фокус при монтуванні
  }, []);

  return <input ref={inputRef} />;
}

useRef не викликає повторний рендер при зміні .current.

5. `useMemo` - кешує обчислення

Оптимізує продуктивність, не перераховуючи складні значення при кожному рендері.

javascript

const sortedUsers = useMemo(() => sortUsers(users), [users]);

6. `useCallback` - кешує функції

Допомагає не перестворювати обробники при кожному рендері.

javascript

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

7. `useReducer` - керує станом через редюсер

Аналог Redux всередині компонента.

javascript

function reducer(state, action) {
  if (action.type === "inc") return { count: state.count + 1 };
  return state;
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

8. `useLayoutEffect` - синхронний ефект

Схожий на useEffect, але виконується до відмальовування, синхронно. Використовується, коли потрібно виміряти DOM до того, як він з'явиться на екрані.

9. `useTransition`, `useDeferredValue` - керування відкладеними оновленнями

Потрібні для оптимізації UI при рендері великих списків, наприклад у React 18.

Підсумок

Хук	Що робить
`useState`	Зберігає стан
`useEffect`	Виконує побічні ефекти
`useContext`	Отримує дані з контексту
`useRef`	Зберігає посилання або незмінне значення
`useMemo`	Кешує обчислення
`useCallback`	Кешує функції
`useReducer`	Керує станом через редюсер
`useLayoutEffect`	Ефект, що виконується до рендера
`useTransition`, `useDeferredValue`	Роблять оновлення не блокуючими

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.