Opowiedz o różnicach między komponentami kontrolowanymi a niekontrolowanymi w React.

Kontrolowane komponenty zarządzają swoim stanem za pomocą useState (lub this.state w klasach) i otrzymują dane oraz funkcje zwrotne przez props. Stan formularza, na przykład, jest przechowywany w stanie React i aktualizowany przez obsługę onChange.

Niekontrolowane komponenty przechowują swój stan wewnątrz DOM. Aby uzyskać do nich dostęp, używa się useRef (lub React.createRef w klasach), aby uzyskać odwołanie do elementu DOM. Wartość elementów formularza, na przykład, jest pobierana bezpośrednio z DOM podczas wysyłania.

Cecha	Kontrolowany komponent	Niekontrolowany komponent
Zarządzanie stanem	Stan React (useState)	DOM
Dostęp do wartości	Przez stan i props	Przez Refs (useRef)
Aktualizacja	Reaktywna, przy każdej zmianie	Przy jawnej akcji (np. wysłanie)
Walidacja	W logice React	Przez standardowe API HTML lub ręcznie po pobraniu wartości

Przykład kontrolowanego komponentu:

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

Przykład niekontrolowanego komponentu:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Wartość input: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Pobierz wartość</button>
    </>
  );
}

Wybór między nimi zależy od złożoności logiki i potrzeby natychmiastowej reakcji na zmiany wejścia. Kontrolowane komponenty są preferowane dla złożonych formularzy i walidacji w czasie rzeczywistym. Niekontrolowane są odpowiednie dla prostych formularzy lub integracji z bibliotekami DOM stron trzecich.