Приведи пример кастомных Hook

Question

Приведи пример кастомных Hook

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

Кастомные хуки позволяют выносить логику из компонентов для повторного использования. Например, хук для управления формой:

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
  };

  return {
    values,
    handleChange,
    setValues
  };
}

// Использование в компоненте
function MyForm() {
  const { values, handleChange } = useForm({ email: '', password: '' });

  return (
    <form>
      <input 
        name="email"
        value={values.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={values.password}
        onChange={handleChange}
      />
    </form>
  );
}

Ключевые моменты:

Имя хука должно начинаться с use
Может использовать другие хуки внутри
Инкапсулирует логику для переиспользования

Ответ 18+ 🔞

О, смотри-ка, какие умные книжки почитали — про кастомные хуки рассказывают! Ну ладно, раз уж начали, сейчас я тебе на пальцах, как эти штуки работают, объясню, а то в документации всё сухо, как в попе у верблюда.

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

Главные правила, блядь, три штуки:

Имя начинай с use. React, он хоть и библиотека умная, но без этой приставки может и не понять, что ты от него хочешь. useForm, useFetch, useWhyIsMyCodeSoFucked — всё по канону.
Внутри него можно и нужно использовать стандартные хуки, типа useState или useEffect. Это как в суп лавровый лист кинуть — основа-то одна, а вкус свой добавляешь.
Вся суть — инкапсулировать логику. Завернул свою писанину в хук, выплюнул наружу только то, что компоненту нужно (значения, функции), и пошёл использовать в десяти местах, не копипастя одно и то же. Красота, ёпта!

Вот смотри на пример, который ты притащил. Там вся возня с состоянием формы и обработчиками изменений спрятана в useForm.

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
  };

  return {
    values,
    handleChange,
    setValues
  };
}

А в компоненте теперь чистота, почти как в операционной, только без мозгоёбства:

function MyForm() {
  // Взял хук, развернул, и всё готово!
  const { values, handleChange } = useForm({ email: '', password: '' });

  return (
    <form>
      <input 
        name="email"
        value={values.email}
        onChange={handleChange} // Та же функция, что и в хуке!
      />
      <input
        name="password"
        type="password"
        value={values.password}
        onChange={handleChange} // Снова она! Один обработчик на все поля!
      />
    </form>
  );
}

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