Kết hợp useState và useContext

Ý tưởng

• useState để setup dữ liệu
• useContext để chia sẻ state đó cho nhiều component

Kết hợp useState và useContext giúp chia sẻ state toàn cục (global) trong ứng dụng mà không cần tới Redux, Zustand, Jotai,…

Ví dụ

import React, { createContext, useState, useContext } from 'react';
 
// 1️⃣ Tạo Context
const AuthContext = createContext();
 
// 2️⃣ Tạo Provider (chứa state)
function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
 
  const login = (name) => setUser({ name });
  const logout = () => setUser(null);
 
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}
 
// 3️⃣ Component con dùng useContext để truy cập state
function UserProfile() {
  const { user, logout } = useContext(AuthContext);
 
  if (!user) return <p>No user logged in</p>;
  return (
    <>
      <p>Hello, {user.name}</p>
      <button onClick={logout}>Logout</button>
    </>
  );
}
 
function LoginButton() {
  const { login } = useContext(AuthContext);
  return <button onClick={() => login('Anh')}>Login as Anh</button>;
}
 
// 4️⃣ Gộp lại trong App
function App() {
  return (
    <AuthProvider>
      <UserProfile />
      <LoginButton />
    </AuthProvider>
  );
}

Lưu ý

• Nếu state trong context thay đổi, tất cả component dùng trong context đó sẽ re-render, nên chỉ sử dụng cách này khi thực sự cần.
• Nếu ứng dụng lớn, phức tạp với nhiều state, ưu tiên sử dụng 3rd-parties (Zustand, Jotai, Redux toolkit)