Fahami React Context API

<Tutorial >

Sebagai developer reactjs yang baharu macam aku, aku selalu gunakan teknik prop drilling untuk pass prop ke child component yang aku buat. Cara ini tak bagus kalau projek kita itu adalah projek yang besar. Aku tahu mengenai kewujudan react context API atau state management library lain seperti redux, mobx, recoil dan banyak lagi library untuk manage state.

Tapi aku tak begitu mahir. Aku faham redux & pernah menggunakannya. tapi tidaklah benar-benar master. Context API ini pula sesuatu yang agak baru, alternative default yg dibawa oleh React. Kalau tak salah aku dia wujud di React 16. So aku nak cuba belajar context api ni sambil rujuk documentation react & tulis blog ni.

Apa itu prop drilling?

// Child.jsx
export const Child = ({id}) => (<GrandChild id={id} />);

// GrandChild.jsx
export const GrandChild = ({id}) => (<SuperGrandChild id={id} />);

// SuperGrandChild.jsx
export const SuperGrandChild = ({id}) => (<h1>My id is {id}</h1>);

//index.jsx
import {Child} from './Child';
import {GrandChild} from './GrandChild';
import {SuperGrandChild} from './SuperGrandChild'

export const ContohPropDril = () => {
  let id = 1;

  return (
     <Child id={id}>
         <GrandChild>
             <SuperGrandChild />
         </GrandChild>
     </Child>
  );
  
}

Kita boleh lihat dari contoh di atas, untuk aku display component SuperGrandChild punya content, iaitu My id is 1, Aku perlu drill sampai ke hujung dunia supaya aku dapat pass prop id aku itu ke component terakhir. Ini adalah sangat tak bagus kan? Bayangkan kita ada 100 level SuperSuperSuperSuperSuperGrandChild component?

Tak kiralah redux, mobx atau context api sekalipun. Tujuan kewujudan semua library ini adalah untuk selesaikan masalah ini.

Menggunakan context ada 2 car bergantung kepada jenis component kita.

Contoh di stateful component (class):

// Child.jsx
export const Child = ({id}) => (<GrandChild id={id} />);

// GrandChild.jsx
export const GrandChild = ({id}) => (<SuperGrandChild id={id} />);

// SuperGrandChild.jsx
import {MyContext} from './index';

export class SuperGrandChild{
  render(){
    return (
      <MyContext.Consumer>
          <h1>My id is {id}</h1>
      </MyContext.Consumer>
    );
  }
}

//index.jsx

export const MyContext = React.createContext();

export class ContohPropDril{

  render () {
    let id = 1;

    return (
         <MyContext.Provider value={id}>
            <Child>
                <GrandChild>
                    <SuperGrandChild />
                </GrandChild>
            </Child>
          </MyContext.Provider>
  );

  }
  
  
}

Lihat kod di atas, mudah kan? Cuma perlu define context apa, dan wrap semua child dengan Context.Provider, Semua children component yang di wrap akan boleh akses atau consume id tersebut tanpa perlu di drill. Cuma perlu wrap Content di child component kita dengan Context.Consumer 😀

Contoh di stateless component (functional):

// Child.jsx
export const Child = ({id}) => (<GrandChild id={id} />);

// GrandChild.jsx
export const GrandChild = ({id}) => (<SuperGrandChild id={id} />);

// SuperGrandChild.jsx
import React, {useContext} from 'react';
import {MyContext} from './index';

export const SuperGrandChild = ({id}) => {

  const id = useContext(MyContext);

  return (<h1>My id is {id}</h1>);

}

//index.jsx
import {Child} from './Child';
import {GrandChild} from './GrandChild';
import {SuperGrandChild} from './SuperGrandChild'

export const ContohPropDril = () => {
  let id = 1;

  return (
     <Child id={id}>
         <GrandChild>
             <SuperGrandChild />
         </GrandChild>
     </Child>
  );
  
}

Untuk functional component ni, kita tak boleh wrap Context.Consumer kita hanya perlu gunakan hook useContext untuk mendapat value dari context kita untuk digunakan oleh content child component 😀

Ah! Lebih mudah dari redux rupanya!. Tapi untuk blog seterusnya aku akan cuba belajar sambil tulis blog juga untuk redux pula 😀

Belanja saya kopi

Artikel lain

Asas Node.js – Built-in module

Dalam Node.js terdapat tidaklah terlalu banyak built-in module. Tapi aku tak akan bincangkan kesemua module tersebut. Aku hanya akan bincangkan beberapa built-in module yang agak penting & digunakan agak kerap ketika pembangunan aplikasi node.js. Antaranya adalah: Path module OS module File System Module Events Module HTTP Module Path module Digunakan untuk handle file path. Contohnya… Continue reading Asas Node.js – Built-in module

Asas Node.js – Module Wrapper Function

Baru-baru ni aku ada update post Asas Node.js – Import/export module. Memandangkan aku dah sentuh sikit pasal module kat situ jadi aku nak sentuh juga sedikir mengenai module wrapper function. Setiap module sebenarnya tidaklah execute kod didalamnya secara terus. Contohnya: app.js “under the hood” sebenarnya content app.js akan di ‘convert’ kepada sesuatu seperti ini: Kod… Continue reading Asas Node.js – Module Wrapper Function