Разкажете за разликите между управляваните и неуправляемите компоненти в React.

Контролираните компоненти управляват своето състояние чрез useState (или this.state в класовете) и получават данни и функции за обратно извикване чрез props. Състоянието на формуляра, например, се съхранява в състоянието на React и се актуализира чрез обработващи onChange.

Неконтролираните компоненти съхраняват своето състояние вътре в DOM. За достъп до тяхната стойност се използва useRef (или React.createRef в класовете), за да се получи препратка към DOM елемента. Стойността на елементите на формуляра, например, се извлича директно от DOM при изпращане.

Характеристика	Контролиран компонент	Неконтролиран компонент
Управление на състоянието	React State (useState)	DOM
Достъп до стойността	Чрез състояние и props	Чрез Refs (useRef)
Актуализация	Реактивно, при всяка промяна	При явна акция (например, изпращане)
Валидация	В логиката на React	Чрез стандартен HTML API или ръчно след получаване на стойността

Пример за контролиран компонент:

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} />
  );
}

Пример за неконтролиран компонент:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Стойност на input: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Вземи стойност</button>
    </>
  );
}

Изборът между тях зависи от сложността на логиката и необходимостта от незабавна реакция на промените във входа. Контролираните компоненти са по-подходящи за сложни форми и валидиране в реално време. Неконтролираните са подходящи за прости форми или за интеграция с външни DOM библиотеки.