Povedzte nám o rozdieloch medzi riadenými a ne riadenými komponentami v React.

Riadené komponenty spravujú svoj stav pomocou useState (alebo this.state v triedach) a prijímajú dáta a funkcie spätného volania cez props. Stav formulára, napríklad, je uložený v stave React a aktualizuje sa pomocou onChange handlerov.

Neriadené komponenty ukladajú svoj stav vo vnútri DOM. Na prístup k ich hodnote sa používa useRef (alebo React.createRef v triedach) na získanie odkazu na DOM prvok. Hodnota prvkov formulára sa napríklad priamo extrahuje z DOM pri odoslaní.

Charakteristika	Riadená komponenta	Neriadená komponenta
Správa stavu	React stav (useState)	DOM
Prístup ku hodnote	Cez stav a props	Cez Refs (useRef)
Aktualizácia	Reaktívne, pri každej zmene	Pri explicitnej akcii (napr. odoslanie)
Validácia	V React logike	Cez štandardné HTML API alebo manuálne po získaní hodnoty

Príklad riadenej komponenty:

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

Príklad neriadenej komponenty:

import React, { useRef } from 'react';

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

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

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Získať hodnotu</button>
    </>
  );
}

Voľba medzi nimi závisí od zložitosti logiky a potreby okamžitej reakcie na zmeny vstupu. Riadené komponenty sú vhodnejšie pre zložité formuláre a validáciu v reálnom čase. Neriadené sú vhodné pre jednoduché formuláre alebo pre integráciu s externými DOM knižnicami.