avatar
·3 dk okuma
Controlled  ve Uncontrolled Componentler

Controlled ve Uncontrolled Componentler

React'ta, bir bileşen (component) kontrol edilen (controlled) veya kontrolsüz (uncontrolled) olabilir.

Kontrollü bileşenler (controlled components), değerlerini genellikle ana bileşen durumundan (state) veya başka bir bileşenin durumundan (props) alırlar ve bu değerler bileşen tarafından belirlenir ve değiştirilir. Bu tür bileşenler, form elemanları (input, select, textarea vb.) için kullanılır. Örneğin:

import React, { useState } from "react";

function ControlledComponentExample() {
  const [value, setValue] = useState("");

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <div>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <p>You typed: {value}</p>
    </div>
  );
}

export default ControlledComponentExample;

Bu örnekte, value durumu, input alanının değerini tutar ve handleChange fonksiyonu, input alanının değeri değiştiğinde çağrılır ve value durumunu günceller.

Kontrolsüz bileşenler (uncontrolled components), değerlerini genellikle DOM aracılığıyla doğrudan alırlar. Bu tür bileşenler, form elemanları için de kullanılabilir, ancak daha az sık kullanılırlar. Örneğin:

import React, { useRef } from "react";

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

  function handleSubmit(event) {
    event.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" ref={inputRef} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default UncontrolledComponentExample;

Bu örnekte, input alanı bir ref ile inputRef değişkenine bağlanır. Form gönderildiğinde handleSubmit fonksiyonu, input alanının değerini alır ve konsola yazdırır.

Fonksiyonel bileşenlerde (functional components), kontrol edilen veya kontrolsüz bileşenler oluşturulabilir. Yukarıdaki örnekler, fonksiyonel bileşenlerde kullanılan örneklerdir. Sınıf bazlı bileşenlerde, kontrol edilen bileşenler genellikle render metodunda oluşturulurken, kontrolsüz bileşenler genellikle ref kullanarak oluşturulur.

Faydaları ve Zararları:

Kontrollü bileşenlerin (controlled components) faydaları şunlardır:

  • Bileşen durumu (state) tek bir kaynaktan kontrol edildiğinden, uygulamanın tutarlı bir durumda kalması kolaylaşır.

  • Bileşen durumu, bileşenler arasında kolayca iletilir, böylece uygulama içindeki farklı bileşenler arasında bilgi paylaşımı daha kolaydır.

  • Bileşenin görsel durumu, bileşen durumuyla doğrudan ilişkilendirildiği için, durum değişiklikleri bileşenin doğru bir şekilde güncellenmesini sağlar.

Kontrolsüz bileşenlerin (uncontrolled components) faydaları şunlardır:

  • Kod yazmak daha kolaydır. Bileşen durumunu yönetmenize gerek yoktur ve bu nedenle daha az kod yazmanız gerekmektedir.

  • Kullanıcı etkileşimleri daha hızlı gerçekleşir. Değerler doğrudan DOM'dan alındığı için, bileşen durumunu güncellemek için herhangi bir işlem yapmanıza gerek yoktur.

Kontrollü bileşenlerin bazı dezavantajları şunlardır:

  • Kod yazmak daha uzun sürebilir. Bileşen durumunun yönetimi daha fazla kod yazmanız gerektirebilir.

  • Daha fazla yönetim gerektirir. Bileşen durumunu yönetmek için ek kod yazmak ve durum değişikliklerine dikkat etmek gereklidir.

Kontrolsüz bileşenlerin bazı dezavantajları şunlardır:

  • Bileşen durumu doğrudan DOM'dan alındığı için, uygulamanın durumu daha zor kontrol edilir ve bu nedenle uygulama daha az tutarlı olabilir.

  • Bileşenler arasında bilgi paylaşımı daha zordur.

Peki bu kavramlar neden var?

Kontrollü ve kontrolsüz bileşenlerin kullanımı, farklı senaryolara bağlı olarak farklı avantajlar sağladığı için ihtiyaç duyulmuştur.

Kontrollü bileşenler genellikle uygulamanın durumunu tek bir yerden kontrol etmek istediğimiz durumlarda kullanılır. Bu, uygulamanın durumunu kolayca yönetebilmemizi ve farklı bileşenler arasında durum bilgisini kolayca paylaşabilmemizi sağlar. Örneğin, bir form bileşeni içindeki tüm girdilerin değerlerini tek bir nesne içinde depolayarak, form gönderildiğinde kolayca işlenebilir hale getirebiliriz.

Kontrolsüz bileşenler ise, daha küçük ve basit bileşenlerde kullanılabilecek bir yöntemdir. Özellikle, kullanıcı tarafından yapılan girdilerin doğrudan alındığı durumlarda kullanılabilir. Bu, uygulamanın durumunu daha az yönetebilsek de, daha hızlı ve daha az kodla yazılmasını sağlar. Örneğin, bir arama kutusu bileşeni içindeki metin girişinin değerini doğrudan DOM'dan alarak, kullanıcının yaptığı aramanın sonuçlarını hızlı bir şekilde gösteririz.

Bu nedenle, kontrollü ve kontrolsüz bileşenlerin kullanımı senaryoya ve bileşen tipine bağlı olarak değişebilir. Kontrollü bileşenler daha büyük ve karmaşık bileşenlerde, kontrolsüz bileşenler ise daha küçük ve basit bileşenlerde kullanılabilir.