Кастомные хуки для работы с компонентами

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

Основы кастомных хуков

Кастомный хук — это обычная функция, название которой начинается с префикса use, и внутри которой могут использоваться стандартные хуки React (useState, useEffect, useRef, useCallback и др.). В контексте Ant Design хуки часто создаются для:

Управления состоянием формы (Form),
Управления модальными окнами (Modal),
Организации логики таблиц (Table) и списков (List),
Упрощения работы с уведомлениями (message, notification).

Пример базового шаблона кастомного хука:

import { useState, useCallback } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  const updateValue = useCallback((newValue) => {
    setValue(newValue);
  }, []);

  return { value, updateValue };
}

export default useCustomHook;

Хук для управления формой `Form`

Компонент Form из Ant Design часто требует управления состоянием полей, валидации и отправки данных. Кастомный хук позволяет объединить все эти действия:

import { useState } from 'react';
import { Form } from 'antd';

function useAntdForm(initialValues = {}) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const submitForm = async (onSubmit) => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      await onSubmit(values);
    } finally {
      setLoading(false);
    }
  };

  return { form, loading, submitForm };
}

Особенности:

form.validateFields() проверяет все поля перед отправкой.
loading позволяет интегрировать индикаторы загрузки на кнопках.
submitForm можно использовать для асинхронной отправки данных.

Хук для управления модальными окнами

Компонент Modal часто требует управления состоянием видимости и обработчиками подтверждения/отмены. Кастомный хук делает код чище:

import { useState, useCallback } from 'react';

function useModal() {
  const [visible, setVisible] = useState(false);

  const open = useCallback(() => setVisible(true), []);
  const close = useCallback(() => setVisible(false), []);

  return { visible, open, close };
}

Применение:

const { visible, open, close } = useModal();

<Modal visible={visible} onCan cel={close} onOk={handleOk}>
  Содержимое модального окна
</Modal>

Преимущества:

Избавление от дублирования useState для каждой модалки.
Удобное управление множественными модальными окнами с одинаковой логикой.

Хук для работы с таблицами

Таблицы в Ant Design (Table) часто сопровождаются пагинацией, сортировкой и фильтрацией. Кастомный хук помогает централизовать обработку этих параметров:

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

function useTable(fetchData) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetchData({ page: pagination.current, pageSize: pagination.pageSize });
      setData(response.data);
      setPagination(prev => ({ ...prev, total: response.total }));
    } finally {
      setLoading(false);
    }
  }, [fetchData, pagination.current, pagination.pageSize]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const handleTableChange = (page) => {
    setPagination(prev => ({ ...prev, current: page.current }));
  };

  return { data, loading, pagination, handleTableChange };
}

Особенности:

Централизация логики загрузки данных.
Автоматическая синхронизация пагинации с сервером.
Легко расширяется фильтрацией и сортировкой.

Хук для уведомлений

Ant Design предоставляет message и notification для уведомлений. Кастомный хук позволяет стандартизировать их использование:

import { message, notification } from 'antd';
import { useCallback } from 'react';

function useNotifications() {
  const showMessage = useCallback((type, content) => {
    message[type](content);
  }, []);

  const showNotification = useCallback((type, title, description) => {
    notification[type]({ message: title, description });
  }, []);

  return { showMessage, showNotification };
}

Пример использования:

const { showMessage, showNotification } = useNotifications();
showMessage('success', 'Операция прошла успешно');
showNotification('error', 'Ошибка', 'Не удалось загрузить данные');