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>
  );
}

function Header() {
  // Sử dụng useContext hook để truy cập dữ liệu từ Context
  const user = useContext(UserContext);
  return <h1>Welcome, {user}!</h1>;
}

Trong ví dụ trên, UserContext được tạo ra và sử dụng để truyền tên người dùng "Alice" xuống component Header mà không cần phải truyền qua props.

Lợi ích của Context

• Tránh "prop drilling": Context giúp bạn tránh việc phải truyền dữ liệu qua nhiều cấp component, một vấn đề thường được gọi là "prop drilling".
• Dễ dàng quản lý trạng thái toàn cục: Context cung cấp một cách dễ dàng để quản lý và truy cập trạng thái toàn cục trong ứng dụng của bạn.
• Tối ưu hóa hiệu suất: Khi sử dụng Context, chỉ những component đăng ký lắng nghe Context mới được cập nhật khi có thay đổi, giúp tối ưu hóa hiệu suất ứng dụng.

Tóm lại, React Context là một công cụ hữu ích cho việc quản lý trạng thái toàn cục và chia sẻ dữ liệu giữa các component mà không cần phải truyền props một cách thủ công qua cây component.