FrontEnd Developer Road Map

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

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.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

2 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

3 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago