Controlled vs Uncontrolled

В библиотеке Chakra UI концепция controlled и uncontrolled компонентов тесно связана с управлением состоянием элементов формы. Понимание различий между этими подходами критично для построения гибких и предсказуемых интерфейсов.

Controlled компоненты

Controlled компонент — это компонент, состояние которого полностью управляется React через пропсы. В Chakra UI это применяется к элементам формы, таким как Input, Textarea, Select, Checkbox и другим.

Принцип работы

В controlled компоненте значение элемента (value) задается извне и обновляется через колбэк (onChange). Компонент не хранит внутреннего состояния.

Пример:

import { Input } from "@chakra-ui/react";
import { useState } from "react";

function ControlledExample() {
  const [value, setValue] = useState("");

  return (
    <Input
      value={value}
      onCha nge={(e) => setValue(e.target.value)}
      placeholder="Введите текст"
    />
  );
}

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

  • Значение value задается извне (useState).
  • Любое изменение контролируется через onChange.
  • Позволяет полностью синхронизировать UI с состоянием приложения.
  • Идеален для форм с валидацией, условной логикой и динамическим поведением.

Uncontrolled компоненты

Uncontrolled компонент — это компонент, который управляет своим состоянием самостоятельно. React не хранит текущее значение в состоянии, а доступ к нему осуществляется через рефы (ref).

Пример:

import { Input, Button } from "@chakra-ui/react";
import { useRef } from "react";

function UncontrolledExample() {
  const inputRef = useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <Input ref={inputRef} placeholder="Введите текст" />
      <Button onCl ick={handleSubmit}>Показать значение</Button>
    </>
  );
}

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

  • Значение хранится внутри DOM, а не в состоянии React.
  • Используется ref для получения текущего значения.
  • Удобен для простых форм, где нет сложной логики и валидации.
  • Меньше кода для элементов, где не требуется синхронизация с состоянием приложения.

Сравнение Controlled и Uncontrolled подходов

Характеристика Controlled Uncontrolled
Хранение значения В React state В DOM
Обновление значения Через onChange Через ref
Подходит для сложной логики Да Нет
Простота реализации Средняя Высокая
Валидация и динамическое поведение Легко интегрируется Сложно

Примеры использования в Chakra UI

  1. Форма регистрации с валидацией (Controlled)
import { Input, Button, FormControl, FormLabel, FormErrorMessage } from "@chakra-ui/react";
import { useState } from "react";

function RegistrationForm() {
  const [username, setUsername] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = () => {
    if (username.length < 3) {
      setError("Имя должно быть не меньше 3 символов");
    } else {
      setError("");
      console.log("Отправка формы:", username);
    }
  };

  return (
    <FormControl isInvalid={!!error}>
      <FormLabel>Имя пользователя</FormLabel>
      <Input value={username} onCha nge={(e) => setUsername(e.target.value)} />
      {error && <FormErrorMessage>{error}</FormErrorMessage>}
      <Button mt={4} onCl ick={handleSubmit}>Зарегистрироваться</Button>
    </FormControl>
  );
}
  1. Поиск без состояния (Uncontrolled)
import { Input, Button } from "@chakra-ui/react";
import { useRef } from "react";

function SearchForm() {
  const searchRef = useRef();

  const handleSearch = () => {
    console.log("Поиск:", searchRef.current.value);
  };

  return (
    <>
      <Input ref={searchRef} placeholder="Поиск..." />
      <Button onCl ick={handleSearch} mt={2}>Найти</Button>
    </>
  );
}

Когда использовать Controlled

  • Необходима валидация на лету.
  • Сложная логика зависимости между полями формы.
  • Синхронизация состояния с сервером или другими компонентами.
  • Реализация масок ввода или динамических подсказок.

Когда использовать Uncontrolled

  • Простые формы, где важно только получить значение на момент отправки.
  • Минимизация кода и производительности.
  • Быстрая интеграция в существующие статические компоненты.

Поддержка Chakra UI

Chakra UI полностью совместим с controlled и uncontrolled подходами. Все основные компоненты формы (Input, Select, Checkbox, Radio) поддерживают:

  • Проп value и onChange для controlled.
  • Проп defaultValue и ref для uncontrolled.

Это делает библиотеку гибкой и удобной как для простых интерфейсов, так и для сложных форм с динамическим поведением.

Понимание различий между controlled и uncontrolled компонентами позволяет создавать интерфейсы, которые точно соответствуют требованиям приложения и упрощают поддержку кода.

Оглавление