Skip to main content

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

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

Основные правила пользовательских хуков:​

Имя пользовательского хука должно начинаться с use, чтобы React мог понять, что это хук, и применять к нему соответствующие правила (например, правила хуков).

Пользовательские хуки могут вызывать другие хуки, такие как useState, useEffect, useContext и т.д.

Преимущества пользовательских хуков:​

  1. Повторное использование логики: Вы можете использовать одну и ту же логику в разных компонентах.
  2. Упрощение компонентов: Логика выносится из компонента, что делает его более чистым и понятным.
  3. Тестируемость: Пользовательские хуки можно тестировать отдельно от компонентов.

Пример: хук для работы с localStorage​

import { useState } from 'react';

// Пользовательский хук useLocalStorage
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

// Использование хука в компоненте
function App() {
  const [name, setName] = useLocalStorage('name', 'Гость');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Введите ваше имя"
      />
      <p>Привет, {name}!</p>
    </div>
  );
}

export default App;

🚀 Источник: DeepSeek