Когда использовать неуправляемые компоненты?

Когда использовать неуправляемые компоненты в React

Неуправляемые компоненты — это компоненты, состояние которых управляется не React, а DOM-элементами напрямую, обычно через ref. В отличие от управляемых компонентов, где React контролирует значение через state и onChange, в неуправляемых компонентах данные извлекаются из DOM только при необходимости, например, при отправке формы.

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

1. Работа с нативными DOM-элементами и сторонними библиотеками

Когда необходимо напрямую взаимодействовать с DOM-элементом или интегрировать библиотеку, которая требует доступа к реальному DOM-узлу (например, для анимаций, медиа-элементов, canvas).

import { useRef, useEffect } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  useEffect(() => {
    // Прямой доступ к DOM-элементу <video>
    videoRef.current.play();
  }, []);

  return <video ref={videoRef} src="video.mp4" />;
}

2. Формы с минимальной валидацией или без неё

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

function SimpleForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Получаем значение напрямую из DOM
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Отправить</button>
    </form>
  );
}

3. Производительность в больших формах

В формах с десятками или сотнями полей управление состоянием каждого через React может привести к потере производительности из-за частых ререндеров. Неуправляемые компоненты позволяют избежать ререндера при каждом изменении поля.

function LargeForm() {
  const formRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(formRef.current);
    // Обработка всех данных формы одним махом
    console.log(Object.fromEntries(formData));
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      {Array.from({ length: 100 }).map((_, i) => (
        <input key={i} name={`field-${i}`} />
      ))}
      <button type="submit">Сохранить</button>
    </form>
  );
}

4. Интеграция с legacy-кодом

При внедрении React в существующий проект, где часть логики уже реализована на нативном JavaScript или jQuery, и требуется сохранить её без переписывания.

5. Файловые инпуты

Элемент <input type="file"> в React всегда является неуправляемым, так как его значение можно установить только пользователем, а не программно.

function FileUpload() {
  const fileInputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(fileInputRef.current.files[0]);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" ref={fileInputRef} />
      <button type="submit">Загрузить</button>
    </form>
  );
}

Сравнение управляемых и неуправляемых компонентов

Рекомендации по выбору

• Используйте управляемые компоненты, когда нужен полный контроль над данными, валидация в реальном времени, условный рендеринг на основе значений полей или интеграция с состоянием приложения (например, через Redux).
• Выбирайте неуправляемые компоненты, когда:
  • Работаете с нативным DOM API или сторонними библиотеками.
  • Форма очень большая и производительность критична.
  • Нужна простая интеграция с legacy-кодом.
  • Работаете с файлами или медиа-элементами.

Итог

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