24. useContext trong React JS

useContext là một trong những React Hook cho phép bạn truy cập vào context trong các thành phần hàm. Context là một cách để chia sẻ thông tin global giữa các thành phần con mà không cần truyền thông qua các prop qua nhiều cấp bậc. Dưới đây là một ví dụ minh họa về cách sử dụng useContext:

jsx

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

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

function App() {
  const [user, setUser] = useState('Guest');

  return (
    <UserContext.Provider value={user}>
      <div>
        <h1>Welcome, {user}!</h1>
        <UserProfile />
        <button onClick={() => setUser('John')}>Login as John</button>
        <button onClick={() => setUser('Jane')}>Login as Jane</button>
      </div>
    </UserContext.Provider>
  );
}

function UserProfile() {
  // Sử dụng useContext để truy cập giá trị từ context
  const user = useContext(UserContext);

  return <p>User Profile: {user}</p>;
}

export default App;

Trong ví dụ trên, UserContext được tạo bằng cách sử dụng React.createContext(). Trong thành phần App, chúng ta sử dụng UserContext.Provider để cung cấp giá trị user cho toàn bộ ứng dụng. Trong thành phần UserProfile, chúng ta sử dụng useContext(UserContext) để truy cập giá trị user từ context và hiển thị nó.

Khi người dùng nhấn vào các nút “Login as John” hoặc “Login as Jane”, giá trị user sẽ thay đổi trong App, và context sẽ tự động cập nhật giá trị mới cho UserProfile mà không cần truyền giá trị qua prop.

useContext là một cách mạnh mẽ để quản lý trạng thái hoặc thông tin chung giữa các thành phần con mà không cần sử dụng prop drilling.

Dưới đây là một ví dụ cụ thể hơn về cách sử dụng useContext để chia sẻ trạng thái giữa các thành phần trong ứng dụng React:

jsx

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

// Tạo context cho trạng thái đăng nhập
const AuthContext = React.createContext();

// Component cha cung cấp giá trị trạng thái
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      <div>
        <h1>Welcome to our website!</h1>
        <Navigation />
        <Content />
      </div>
    </AuthContext.Provider>
  );
}

// Component con sử dụng context để truy cập trạng thái đăng nhập
function Navigation() {
  const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);

  return (
    <nav>
      {isLoggedIn ? (
        <button onClick={() => setIsLoggedIn(false)}>Logout</button>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </nav>
  );
}

// Component con sử dụng context để hiển thị nội dung tương ứng với trạng thái đăng nhập
function Content() {
  const { isLoggedIn } = useContext(AuthContext);

  return <p>{isLoggedIn ? 'Welcome, user!' : 'Please login.'}</p>;
}

export default App;

Trong ví dụ này, chúng ta tạo một context AuthContext để chia sẻ trạng thái đăng nhập (isLoggedIn) giữa các thành phần con. Component App cung cấp giá trị trạng thái và hàm để cập nhật trạng thái thông qua AuthContext.Provider. Hai thành phần con Navigation và Content sử dụng useContext(AuthContext) để truy cập và sử dụng trạng thái đăng nhập.

Khi người dùng nhấn nút “Login” hoặc “Logout” trong Navigation, trạng thái isLoggedIn sẽ được cập nhật thông qua setIsLoggedIn trong context, và các thành phần khác sẽ tự động cập nhật để phản ánh trạng thái mới.

Điều này giúp quản lý trạng thái ứng dụng một cách dễ dàng và tránh việc prop drilling (truyền props qua nhiều cấp bậc). Trên đây là giới thiệu về useContext trong React JS.