React context là gì?

React Context là một cơ chế trong React cho phép bạn chia sẻ dữ liệu một cách dễ dàng giữa tất cả các component trong cùng một cây component, mà không cần phải truyền props xuống từng cấp một cách thủ công. Context được thiết kế để chia sẻ dữ liệu mà có thể được coi là "toàn cục" cho một cây component, như là thông tin xác thực người dùng hiện tại, theme ứng dụng, hoặc ngôn ngữ ưu tiên.

Cách hoạt động của Context

Để sử dụng Context, bạn sẽ tạo một Context mới bằng cách sử dụng React.createContext() và sau đó sử dụng Provider để bao bọc cây component của bạn. Các component con sau đó có thể đăng ký để lắng nghe thay đổi của Context thông qua Consumer hoặc useContext hook.

Ví dụ về Context

import React, { createContext, useContext } from 'react';

// Tạo một Context mới
const UserContext = createContext();

function App() {
  // Sử dụng Provider để truyền dữ liệu
  return (
    <UserContext.Provider value="Alice">
      <Header />
    </UserContext.Provider...