Чем отличаются контролируемые и неконтролируемые компоненты в React? В каких случаях лучше использовать неконтролируемые?

Контролируемый input в React — это элемент формы, значение которого полностью управляется состоянием компонента. Значение input хранится в state, а изменение input происходит через обработчик событий, который обновляет state.

Пример контролируемого input:

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Здесь value input всегда соответствует состоянию value в компоненте, а любое изменение текста вызывает handleChange, который обновляет состояние. Это позволяет React контролировать и синхронизировать состояние формы.