Hi mọi người hôm nay mình sẽ nói về 1 useContext() hook trong React nha.

Context cung cấp phương pháp để chia sẻ những giá trị giữ các component với nhau

Mình có cây component sau: App(status: false) -> Header -> Menu -> User -> Profile

Mình muốn truyền 1 dât từ App sang component Profile sẽ gặp vấn đề Props Drilling (truyền props thông qua nhiều component)

Context sẽ giúp mình truyền từ component cha xuống thằng component cháu, chắc luôn mà không cần thông qua các component trung gian nữa hehe

3 bước đơn để tạo context

import {createContext} from "react";

//B1. Tạo context
export const StatusContext = createContext();
// export để component con cháu sẽ có thể dùng được
// StatusContext trả về 1 Object có Provider và Consumer

//B2. Dùng provider cho component cha nhận được dữ liệu để component con có thể sử dụng được
// Thằng Provider sẽ bọc component cha

 

Với Provider sẽ có prop là value. Value nhận dữ liệu gì thì toàn bộ các childrent trong Provider đều có thể nhận được value đó

Ở component con Component-Child

import {useContext} from "react";
import {StatusContext} from "nơi export context";

// Để nhận được dữ liệu từ component cha thì có hook useContext() React viết sẵn để nhận data rồi hehe
const value = useContext(StatusContext);
// value sẽ là giá trị mà ở Provider component cha truyền vào

Và tới đây ở component con có data từ component cha truyền qua rồi thì thoải mái dùng thôi, không cần quan tâm từ component cha qua mình có bao nhiêu trung gian nữa hehe.