React Hooks ve useContext Kullanımı

Selamlar. Bir önceki yazıda react’in state yapısı hakkında bir yazı yazmıştım. Bu yazıda bir başka hayat kurtarıcı özellik olan context hakkında ufak bilgi vereceğim.

Context API Ne Yapar?

Context kullanarak çalıştığınız componentler arasında veri taşıma işlemi gerçekleştirebilirsiniz diyebilirim. Context yapısında, context’in kendisine ait bir state vardır. Bu state provider componentinde tutulur. Eski yöntemle bahsedecek olursak bu state’e Context API içerisinde yer alan Consumer ile erişim sağlanır.

React Hooks ve useContext Kullanımı

Aslında bu yeni bir özellik değil. Sadece hooks öncesi kullanımı ve hooks sonrası kullanımı ile işler biraz daha kolaylaşıyor.

Bilindiği üzere React ile context oluşturma işlemi için aşağıdaki şekilde bir kullanım gerekiyor;

const KullaniciContext = React.createContext()

Daha sonra eski yöntemle yani hooks öncesi yöntemle contextlerin kontrolü için bir adet provider ve bir adet consumer lazım oluyordu. Gerçi provider şu anda da lazım ama örnek olması açısından belirttim.

Hooks olmadan kısacası context’e aktarılan parametrelerin kullanımı aşağıdaki gibi;

function Sidebar() {

  return (
    <KullaniciContext.Consumer>
      {kullanici => <div>Merhaba, {kullanici.adi}</div>}
    </KullaniciContext.Consumer>
  )
}

Hooks ile bu tarz bir kullanıma gerek olmadan daha basit bir kullanım gerçekleştirebiliyoruz.

import React, { useContext } from 'react';

function Sidebar() {
  const kullanici = useContext(KullaniciContext)

  return <div>Merhaba, {kullanici.adi}</div>
}

Context sayesinde sizi Redux kullanmaya iten nedenlerden belki de uzaklaşabilirsiniz. Bu yazıda sadece context api kullanımına değindim.

Tüm Kodlar

Burada bu yazıdaki bütün kodlar yer alıyor;

import React, { useContext } from 'react';

const KullaniciContext = React.createContext()

function Navbar() {
  const kullanici = useContext(KullaniciContext)

  return (
    <div>
      <ul>
        <li>Anasayfa</li>
        <li><a href={'/posts/' + kullanici.id}>Yazılarıma Git</a></li>
        {(kullanici.admin) ? <li>Site Ayarları</li> : ""}
      </ul>
      Hoşgeldiniz {kullanici.adi}
    </div>
  )
}

function Sidebar() {
  const kullanici = useContext(KullaniciContext)

  return <div>Merhaba, {kullanici.adi}</div>
}

function App() {

  const kullanici = {
    id: 1,
    adi: "Ali",
    admin: true
  }

  return (
    <React.Fragment>
      <KullaniciContext.Provider value={kullanici}>
        <Navbar />
        <Sidebar />
      </KullaniciContext.Provider>
    </React.Fragment>
  );
}

export default App;

Özetle

Eğer projelerinizde Context kullanmak istiyorsanız minimum React sürümü 16.3 olmalı. Context’i Hooks ile kullanmak istiyorsanız minimum React sürümü 16.8 olmalı.

Eğer mümkünse hooks api ile Context kullanın

Hooks kullanmanıza engel bir durum var ya da kullanmak istemiyorsanız Consumer ile context state’ine erişebilirsiniz.

Kaynaklar

Bu yazıyı hazırlarken aşağıdaki kaynaklardan faydalandım;

Step by Step Examples of React Hooks

How the useContext Hooks Works

Bu yazıda React Hooks ve useContext Kullanımı hakkında ufak bir bilgi aktarmaya çalıştım. Umarım faydalı olmuştur. Hatalı bir bilgi var ise yorumda belirtirseniz yazıyı düzenlerim.

Okuduğunuz İçin Teşekkür Ederim.