Giả sử bạn đang làm việc trên một dự án lớn và phải truyền props qua nhiều lớp component. Và mỗi lần cần cập nhật một prop, bạn lại phải lặp lại quy trình mệt mỏi đó ở từng component trung gian. Thật bực mình, phải không?
Sẽ tuyệt vời biết bao nếu bạn có thể lưu tất cả các biến useState và các hàm tiện ích vào một nơi tập trung, và truy cập chúng ở bất kỳ đâu trong ứng dụng chỉ với một dòng mã?
Đó chính xác là lúc React Context API phát huy tác dụng. Nó loại bỏ rắc rối khi truyền props xuống nhiều lớp và cho phép bạn quản lý cũng như chia sẻ state cùng logic một cách hiệu quả hơn trong toàn ứng dụng.
React Context API là gì?
Nếu bạn từng phải truyền props qua ba (hoặc nhiều hơn) component chỉ để đến được một component con nằm sâu, thì Context API chính là công cụ "giải cứu" bạn.
React Context API cung cấp một cách để chia sẻ giá trị giữa các component mà không cần truyền props thủ công ở mỗi cấp. Nó phù hợp để quản lý state toàn cục như:
- Xác thực người dùng
- Chủ đề ứng dụng (dark/light mode)
- Cài đặt ngôn ngữ
- Cấu hình Firebase hoặc API
Khi nào (và tại sao) nên dùng?
Hãy dùng Context API khi bạn cần chia sẻ state giữa nhiều component, đặc biệt là khi chúng được lồng sâu. Nó lý tưởng cho các mối quan tâm toàn cục và không thay đổi thường xuyên.
🔹 Các tình huống thực tế:
- Quản lý trạng thái đăng nhập người dùng
- Bật/tắt dark mode
- Cấu hình Firebase hoặc API
- Hiển thị toast hoặc thông báo
- Quản lý nhiều trạng thái liên quan theo kiểu module
⚠️ Không nên dùng Context cho dữ liệu thay đổi thường xuyên như input trong form — có thể gây vấn đề về hiệu năng. Với các trường hợp như vậy, hãy cân nhắc dùng các thư viện như Zustand, Redux, hoặc Recoil.
Thiết lập Context cơ bản (từng bước)
Cùng đi qua ví dụ thiết lập UserContext để quản lý xác thực:
Bước 1: Tạo thư mục contexts trong thư mục src
→ Giúp bạn tổ chức dự án gọn gàng hơn.
Bước 2: Tạo UserProvider.jsx
import { createContext, useState } from "react"; const UserContext = createContext(null); const UserProvider = ({ children }) => { const [loggedIn, setLoggedIn] = useState(false); const [userCredentials, setUserCredentials] = useState({}); const createUser = () => { /* Firebase signup logic */ }; const getUserDetails = () => { /* Fetch user data */ }; const updateUserDetails = () => { /* Update user */ }; const deleteUser = () => { /* Delete user */ }; return ( <UserContext.Provider value={{ loggedIn, createUser, getUserDetails, updateUserDetails, deleteUser, userCredentials, setUserCredentials }}> {children} </UserContext.Provider> );
}; export { UserContext, UserProvider };
Bước 3: Sử dụng Context trong Component
import React, { useContext } from "react";
import { UserContext } from "../../contexts/UserProvider"; const Profile = () => { const { getUserDetails, updateUserDetails, userCredentials, setUserCredentials } = useContext(UserContext); return ( <div> {/* Use the functions and state */} </div> );
}; export default Profile;
Tôi dùng Context trong dự án thực tế (với Firebase) như thế nào?
Trong một dự án thực tế có tên ClassMantra — trợ lý giảng dạy sử dụng AI, tôi dùng Context API để tích hợp logic Firebase.
Đây là những gì tôi dùng Context để quản lý:
- Xác thực và đăng ký người dùng
- Thao tác với Firestore: thêm, đọc và xóa bài tập
- Tổ chức tất cả logic và state liên quan đến Firebase vào một nơi — dễ tái sử dụng
Nhờ đó, tôi tránh việc prop drilling và có thể truy cập Firebase ở bất kỳ đâu chỉ bằng một import.
Các lỗi thường gặp & thực tiễn tốt
- Gói toàn bộ App bằng Provider
import { UserProvider } from "./contexts/UserProvider"; function App() { return ( <UserProvider> <FirebaseProvider> {/* Your application */} </FirebaseProvider> </UserProvider> );
}
- Quá nhiều context lồng nhau → Hãy kết hợp hoặc compose lại thành một provider tổng.
- Dùng Context cho dữ liệu thay đổi nhanh → Tránh vì có thể gây lag. Hãy dùng local state hoặc state management khác như Zustand.
Kết luận
React Context API là một công cụ mạnh mẽ nếu bạn sử dụng đúng cách. Nó giúp đơn giản hóa việc quản lý state toàn cục như xác thực người dùng, chủ đề ứng dụng, logic chia sẻ — đặc biệt hữu ích khi dự án của bạn phát triển.