Пишешь ли код с хуками

Да, я активно пишу код с использованием хуков React

Как разработчик с большим опытом работы с React, я не только пишу код с хуками, но и считаю их фундаментальным прорывом в экосистеме React, который кардинально изменил подход к созданию компонентов. Хуки, представленные в React 16.8, решили множество проблем, присущих классовым компонентам, и предложили более элегантный и мощный способ работы с состоянием, побочными эффектами и логикой компонентов.

Ключевые хуки, которые я использую ежедневно

1. useState — для управления локальным состоянием компонента.

   const Counter = () => {
     const [count, setCount] = useState(0);
     return (
       <div>
         <p>Вы кликнули {count} раз</p>
         <button onClick={() => setCount(count + 1)}>
           Кликни меня
         </button>
       </div>
     );
   };
   

2. useEffect — для выполнения побочных эффектов (запросы к API, подписки, ручное изменение DOM).

   const DataFetcher = ({ userId }) => {
     const [data, setData] = useState(null);
     useEffect(() => {
       const fetchData = async () => {
         const response = await fetch(`/api/user/${userId}`);
         setData(await response.json());
       };
       fetchData();
     }, [userId]); // Эффект зависит от userId
     return <div>{data ? data.name : 'Загрузка...'}</div>;
   };
   

3. useContext — для доступа к значению контекста без громоздкого Consumer.

   const ThemeContext = React.createContext('light');
   const ThemedButton = () => {
     const theme = useContext(ThemeContext);
     return <button className={`btn-${theme}`}>Тема: {theme}</button>;
   };
   

4. useRef — для получения прямого доступа к DOM-элементам или сохранения мутируемого значения между рендерами.

   const FocusInput = () => {
     const inputRef = useRef(null);
     const onButtonClick = () => {
       inputRef.current.focus();
     };
     return (
       <>
         <input ref={inputRef} type="text" />
         <button onClick={onButtonClick}>Фокус на поле ввода</button>
       </>
     );
   };
   

5. useMemo и useCallback — для оптимизации производительности, предотвращения лишних вычислений и стабилизации ссылок на функции.

Преимущества, которые я ценю в хуках

• Повторное использование логики: Собственные хуки (custom hooks) — это мощнейший механизм для извлечения и повторного использования логики с состоянием. Это решает проблему "wrapper hell", свойственную HOC и Render Props.

  // Кастомный хук для использования localStorage
  function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
      try {
        const item = window.localStorage.getItem(key);
        return item ? JSON.parse(item) : initialValue;
      } catch (error) {
        return initialValue;
      }
    });
    const setValue = (value) => {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    };
    return [storedValue, setValue];
  }
  // Использование в компоненте
  const [name, setName] = useLocalStorage('username', 'Гость');
  

• Более читаемый и компактный код: Компоненты становятся менее многословными. Вся связанная логика (состояние, эффекты, подписки) группируется по смыслу, а не по методам жизненного цикла.

• Упрощение тестирования: Логику, вынесенную в кастомные хуки, можно тестировать изолированно, без необходимости рендерить целый компонент.

• Единый подход к состоянию: Уходит путаница между this.state, this.props, контекстом и внешними хранилищами. Теперь практически любой источник данных можно обработать через хук.

В своей текущей практике я пишу почти исключительно на функциональных компонентах с хуками. Классовые компоненты остаются в легаси-коде или в очень редких случаях, когда требуется метод getSnapshotBeforeUpdate. Моя команда активно разрабатывает и использует библиотеки кастомных хуков для работы с API, аналитикой, обработкой форм и управления сложным состоянием приложения. Хуки стали неотъемлемой и любимой частью моего React-стэка.