React Tutorial 2023 47 – useContext Hook’u 1 – Local ve Global State Yönetimini Anlamak

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bu yazımla beraber useContext Hook’una geçiş yapmadan kavramsal olarak anlamamızı istediğim bir konumuz var bunlara bakıyor olacağız.

Öncelikle Local ve Global state yönetimini tam olarak anlayalım istiyorum.

State Yönetimi Nedir?

React uygulamalarında, “state yönetimi” genellikle bir bileşenin içindeki dinamik verilerin kontrol edilmesi ve güncellenmesi anlamına gelir. State, bir bileşenin durumunu temsil eden verilerdir. Bileşenlerdeki durumlar genellikle kullanıcı etkileşimleri, API çağrıları veya diğer dinamik olaylarla değişebilir.

React’te state yönetimi, genellikle useState hook’u veya sınıf tabanlı bileşenlerde this.state ve this.setState kullanılarak gerçekleştirilir. Bu, bir bileşenin içindeki veriyi güncellemenin ve bu güncel veriyi ekrana yansıtmanın bir yoludur.

Local State Kavramı

Local state, bir bileşenin kendi içindeki durumu ifade eder. Bu durum, sadece o bileşen için geçerlidir ve diğer bileşenlerle paylaşılmaz. Genellikle useState hook’u kullanılarak yönetilir.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Burada, count değişkeni sadece Counter bileşeni içinde kullanılır ve bu bileşenin kendi içindeki durumu temsil eder.

Global State Kavramı

Global state ise uygulama genelinde paylaşılan bir durumu ifade eder. Birden çok bileşen arasında veri paylaşımını sağlar. Bu genellikle bağlam (context) veya yönetim kütüphaneleri (Redux gibi) kullanılarak gerçekleştirilir.

import React, { createContext, useContext, useState } from 'react';

const GlobalStateContext = createContext();

const GlobalStateProvider = ({ children }) => {
  const [globalCount, setGlobalCount] = useState(0);

  return (
    <GlobalStateContext.Provider value={{ globalCount, setGlobalCount }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

const CounterUsingGlobalState = () => {
  const { globalCount, setGlobalCount } = useContext(GlobalStateContext);

  const incrementGlobalCount = () => {
    setGlobalCount(globalCount + 1);
  };

  return (
    <div>
      <p>Global Count: {globalCount}</p>
      <button onClick={incrementGlobalCount}>Increment Global Count</button>
    </div>
  );
};

Burada, GlobalStateProvider bileşeni aracılığıyla globalCount ve setGlobalCount değerleri tüm uygulama boyunca paylaşılır ve CounterUsingGlobalState bileşeni bu global durumu kullanabilir.

Bir sonraki yazımda görüşmek üzere.