React'te kontrol edilen ve kontrol edilmeyen bileşenler arasındaki farkları anlatın.

Kontrol edilen bileşenler, durumlarını useState (veya sınıflarda this.state) aracılığıyla yönetir ve verileri ile geri çağrı fonksiyonlarını props aracılığıyla alır. Örneğin, form durumu React durumunda saklanır ve onChange olay işleyicileriyle güncellenir.

Kontrol edilmeyen bileşenler, durumlarını DOM içinde saklar. Değerlerine erişmek için useRef (veya sınıflarda React.createRef) kullanılır ve DOM referansı alınır. Form öğelerinin değeri, örneğin, submit sırasında doğrudan DOM'dan alınır.

Özellik	Kontrol edilen bileşen	Kontrol edilmeyen bileşen
Durum yönetimi	React Durumu (useState)	DOM
Değere erişim	Durum ve props aracılığıyla	Refs (useRef) aracılığıyla
Güncelleme	Her değişiklikte reaktif	Açıkça yapılan işlemle (örneğin, submit)
Doğrulama	React mantığında	Standart HTML API veya manuel olarak değer alındıktan sonra

Kontrol edilen bileşene örnek:

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

Kontrol edilmeyen bileşene örnek:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Input değeri: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Değeri al</button>
    </>
  );
}

Aralarındaki seçim, giriş değişikliklerine anında tepki verme gerekliliği ve mantık karmaşıklığına bağlıdır. Kontrol edilen bileşenler, karmaşık formlar ve gerçek zamanlı doğrulama için tercih edilir. Kontrol edilmeyenler, basit formlar veya üçüncü taraf DOM kütüphaneleriyle entegrasyon için uygundur.