React: Context

Sebelum React 16.3, satu-satunya cara untuk ngirim state dari komponen parent ke komponen child adalah pake props. Jadi nggak jarang kita bikin komponen yang punya prop xyz tapi nggak memproses nilai prop itu, dia punya prop itu cuma biar bisa ngirim lagi ke komponen child di bawahnya lagi. Istilahnya props chain.

Jadi bisa dibilang komponen Child A sia-sia punya prop xyz karena dia sebenernya nggak butuh. Tapi karena Child B perlu prop itu, mau nggak mau Child A harus punya prop xyz. Mungkin kalo strukturnya nggak panjang, cuma ada 2 komponen child, masih okelah. Tapi kalo strukturnya panjang, jadi jelek & ribet sekali. Kita harus nambahin kode yang nggak perlu di banyak komponen sekedar biar bisa transfer prop xyz ke bawah. Alternatifnya, ya pake state-manager seperti Redux. Tapi pake Redux juga jadi beban tersendiri terutama kalo proyeknya nggak terlalu rumit. Bisa-bisa malah over-engineering.

Sejak React 16.3 ada API baru namanya Context. API ini memungkinkan kita kirim state dari parent ke child, di manapun dia berada, tanpa repot-repot bikin rantai props.

Cara pakenya cukup gampang. Kita tinggal panggil React.createContext() & simpan hasilnya dalam variabel. Di komponen parent kita pake Context.Provider & sambungin dengan state. Di sisi komponen child yang butuh baca state dari parent kita pake HOC Context.Consumer atau contextType.

Jadi saya bisa bikin context di modul yg terpisah, misalnya myContext.js.

import React from "react";

const MyContext = React.createContext();
export default MyContext;

Terus saya bikin Provider di komponen Parent.


import MyContext from './myContext';

export default class Parent extends React.PureComponent {
  
  state = {
    xyz: 0
  } 

  // ... dst

  render() {
    return (
      <MyContext.Provider value={this.state}>
        <div>
          <ChildA />
        </div>
      </MyContext.Provider>
    );
  }
}

Komponen ChildA punya child namanya ChildB. Komponen ini yang perlu baca xyz.

// komponen ChildB
import React from "react";
import MyContext from "./myContext";

export default props => {
  return (
    <MyContext.Consumer>
      {value => {
        return <div>{value.xyz}</div>;
      }}
    </MyContext.Consumer>
  );
};

Contoh yang agak lengkap ada di bawah ini.

Nggak pake Context

Pake Context.Consumer (functional)

Pake contextType (life-cycle)

Sekian. Mudah-mudahan bermanfaat.

Also in this category ...