🤔 Для чего используются хуки?

Для работы с состоянием и другими возможностями React без использования классовых компонентов. Они позволяют вам использовать функциональные компоненты и при этом сохранять состояние, обрабатывать побочные эффекты и использовать другие возможности, которые ранее были доступны только в классовых компонентах.

🚩Хуки

🟠useState
Позволяет добавлять состояние в функциональные компоненты. Он принимает начальное значение состояния и возвращает массив с текущим значением состояния и функцией для его обновления.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

🟠useEffect
Позволяет выполнять побочные эффекты в функциональных компонентах. Это может быть запрос данных, подписка на события или манипуляции с DOM. Он выполняется после рендера компонента.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer); // Очистка таймера при размонтировании
  }, []);

  return (
    <div>
      <p>Счетчик: {count}</p>
    </div>
  );
}

🟠useContext
Позволяет использовать контекст в функциональных компонентах. Он принимает объект контекста и возвращает текущее значение контекста.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

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

🚩Пользовательские хуки

Вы можете создавать свои собственные хуки, чтобы переиспользовать логику между компонентами. Пользовательский хук — это функция, которая использует другие хуки.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// Использование пользовательского хука
function DataComponent() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <p>Загрузка...</p>;
  return <div>Данные: {JSON.stringify(data)}</div>;
}

Ставь 👍 и забирай 📚 Базу знании