React Hooks ile useContext()

October 14, 2020

Önceki yazılarımda useState() ve useEffect() anlatmıştım. Şimdi ise React Hooks un diğer önemli kavramı olan react hooks ile useContext anlatacağım. Bunun için ilk önce React Context Api kavramanız gerekir. Bununla ilgimi yazıma buradan ulaşabilirsiniz.

Hookslar ile birlikte gelen useContext(), contextType veya Consumer ile eriştiğimiz context e artık useContext() ile erişebiliriz. Daha iyi anlamamız için React Context Api anlatığım örnek üzerinden gitmek daha faydalı olacaktır.

// Sidebar.js
import React, { Component } from 'react'
import {ThemeContext} from '../context/ThemeContext';

export default class Sidebar extends Component {
static contextType = ThemeContext;
  render() {
  const {isLightTheme, light, dark} = this.context;
  const theme = isLightTheme ? light : dark
  return (
      <div className="sidebar" style={{background: theme.bg}}>
          <span style={{color: theme.color}}>Sidebar</span>
      </div>
      )
  }
}

// Navbar.js
import React, { Component } from "react";
import { ThemeContext } from "../context/ThemeContext";

export default class Navbar extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {themeContext => {
        const { isLightTheme, light, dark } = themeContext;
        const theme = isLightTheme ? light : dark;
          return (
            <div className="navbar" style={{ background: theme.bg }}>
              <span style={{color: theme.color}}>Navbar</span>
            </div>
        );
      }}
     </ThemeContext.Consumer>
  );
}

}

Gördüğünüz gibi Sidebar da context e contextType ile erişmiştim. Navbar da ise Consumer ile eriştim. Ama React Hooks la birlikte gelen useContext() ile artık context erişmek biraz da kolay. UseContext() ile context e şu şekilde erişiyoruz.

   // Sidebar.js
import React, { useContext } from 'react'
import {ThemeContext} from '../context/ThemeContext';

const Sidebar = () => {
  const {isLightTheme, light, dark} = useContext(ThemeContext);
  const theme = isLightTheme ? light : dark
    return(
      <div className="sidebar" style={{background: theme.bg}}>
        <span style={{color: theme.color}}>Sidebar</span>
      </div>
    )
  }

export default Sidebar;

// Navbar.js
import React, { useContext } from "react";
import { ThemeContext } from "../context/ThemeContext";

const Navbar = () => {
  const { isLightTheme, light, dark } = useContext(ThemeContext);
  const theme = isLightTheme ? light : dark;
    return (
      <div className="navbar" style={{ background: theme.bg }}>
        <span style={{color: theme.color}}>Navbar</span>
      </div>
)

}

export default Navbar;

Yukarıda da gördüğünüz gibi useContext projemize import ettikten sonra,

 const {isLightTheme, light, dark} = useContext(ThemeContext);

kod satırı ile context e erişiyoruz. Projenizde react sürümü 16.8 ve React Hooks ları kullanıyorsanız. Context e erişmek için de React Hooks ile gelen useContext() kullanabilirsiniz.

Elimde geldiğince useContext() anlatmaya çalıştım. Umarım faydalı olmuştur…

Share: