Quản lý danh sách người dùng bằng React Context API

Quản lý danh sách người dùng bằng React Context API

Trong ReactJS, chúng ta có thể sử dụng Context API để quản lý dữ liệu dễ dàng và hiệu quả hơn so với props từ cha sang con. Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng Context API để quản lý danh sách người dùng trong một ứng dụng ReactJS.

Bước 1: Tạo một Context

Đầu tiên, ta sẽ tạo một Context sử dụng hàm createContext của React.

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

export const UserContext = createContext();

Bước 2: Tạo Provider cho Context

Sau đó, ta sẽ tạo một Provider cho Context này để cung cấp giá trị cho các Component con.

export const UserProvider = (props) => {
  const [users, setUsers] = useState([
    { id: 1, name: 'User 1' },
    { id: 2, name: 'User 2' },
    { id: 3, name: 'User 3' },
  ]);

  return (
    <UserContext.Provider value={[users, setUsers]}>
      {props.children}
    </UserContext.Provider>
  );
};

Bước 3: Sử dụng Context trong một Component

Để sử dụng Context trong một Component, ta sử dụng hàm useContext.

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

const UserList = () => {
  const [users, setUsers] = useContext(UserContext);

  return (
    <div>
      <h3>User List</h3>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

Bước 4: Sử dụng Provider trong ứng dụng

Cuối cùng, ta sẽ sử dụng Provider trong cấu trúc của ứng dụng.

import React from 'react';
import { UserProvider } from './UserContext';
import UserList from './UserList';

function App() {
  return (
    <UserProvider>
      <UserList />
    </UserProvider>
  );
}

export default App;

Kết quả:

Với việc sử dụng Context API, chúng ta có thể quản lý danh sách người dùng hoặc bất kỳ dữ liệu nào từ backend API một cách dễ dàng và hiệu quả hơn so với việc sử dụng props từ cha sang con. Việc sử dụng Context API giúp cho code trở nên dễ quản lý và dễ mở rộng hơn.