useContext

Chia sẻ state giữa các component là bài toán phổ biến trong React App. Giải pháp tốt nhất là bạn phải lifting state (đẩy state từ component con lên component cha). Nhưng nó yêu cầu bạn phải truyền props xuống cho các component con. Một số trường hợp truyền props xuống quá nhiều cấp component lại rất khó khăn và tốn nhiều thời gian.

Tạo một context để thêm những shared state và sau đó component nào cần thì bạn gọi context đó ra xài, không cần phải truyền từ cha xuống con nữa. Nó cũng giống như biến global được chia sẻ và sử dụng ở nhiều nơi, nhưng context được quản lí tốt hơn để maintain code dễ hơn.

useContext Hook cho phép chúng ta truy cập tới 1 context như sau:

const value = useContext(Context)

Trong đó:

• value: sẽ là biến chứa giá trị context hiện tại được trả về.
• Context: là React Context mà bạn đã tạo trước đó.

import React from 'react'

// Tạo 1 context mới với giá trị khởi tạo rỗng - bạn có thể truyền vào nếu bạn muốn
const CounterContext = React.createContext()
export default CounterContext

Sử dụng useContext trong Hook:

import CounterContext from './CounterContext'

const CounterInfo = () => {
  // Trông chả khác gì local variables, bạn dễ dàng sử dụng ở bất cứ đâu trong function ^^
  const { count, increase, decrease } = useContext(CounterContext)
  return (
    <div className="wrapper">
      <button onClick={decrease}>-</button>
      <span>{count}</span>
      <button onClick={increase}>+</button>
    </div>);
};

• useContext giúp ta sử dụng React Context bên trong functional component.
• Vẫn cần phải tạo React Context và bọc component bên trong Provider mới có thể truy cập được context.
• useContext khiến cho việc sử dụng context linh hoạt bên trong component, hệt như sử dụng các local variables thông thường.