Реците о разликама између контролисаних и неконтролисаних компоненти у React.

Kontrolisane komponente upravljaju svojim stanjem putem useState (ili this.state u klasama) i primaju podatke i funkcije za povratni poziv putem props-a. Stanje forme, na primer, čuva se u React stanju i ažurira putem onChange handlera.

Ne kontrolisane komponente čuvaju svoje stanje unutar DOM-a. Za pristup njihovoj vrednosti koristi se useRef (ili React.createRef u klasama) za dobijanje reference na DOM element. Vrednost form elementa, na primer, direktno se izvlači iz DOM-a prilikom slanja.

Karakteristika	Kontrolisana komponenta	Ne kontrolisana komponenta
Upravljanje stanjem	React stanje (useState)	DOM
Pristup vrednosti	Kroz stanje i props	Kroz Refs (useRef)
Ažuriranje	Reaktivno, pri svakoj promeni	Pri eksplicitnoj akciji (npr. submit)
Validacija	U React logici	Kroz standardni HTML API ili ručno nakon dobijanja vrednosti

Primer kontrolisane komponente:

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

Primer nekontrolisane komponente:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Vrednost inputa: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Preuzmi vrednost</button>
    </>
  );
}

Izbor između njih zavisi od složenosti logike i potrebe za trenutnim reakcijama na promene unosa. Kontrolisane komponente su pogodnije za složene forme i validaciju u realnom vremenu. Nekontrolisane su pogodne za jednostavnije forme ili za integraciju sa spoljnim DOM bibliotekama.