Toàn Tập Về Các Loại State Trong React

Trong React, state là một khái niệm quan trọng giúp bạn theo dõi và quản lý dữ liệu thay đổi theo thời gian trong ứng dụng. Tuy nhiên, không phải tất cả state đều giống nhau. Tuỳ vào phạm vi sử dụng và nguồn dữ liệu, state trong React có thể được phân thành nhiều loại khác nhau.

Bài viết này sẽ giới thiệu 5 loại state phổ biến trong React, cùng với ví dụ và cách áp dụng trong thực tế.

1. Local State (State cục bộ)

Local state là loại state được khai báo và sử dụng trong phạm vi của một component cụ thể. Đây là loại state phổ biến nhất và thường được tạo bằng hook useState.

Dùng để:

• Theo dõi input trong form
• Kiểm soát trạng thái hiển thị của modal, dropdown
• Quản lý counter, toggle...

Ví dụ:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Đã bấm {count} lần
    </button>
  );
}

2. Global State (State toàn cục)

Khi bạn cần chia sẻ dữ liệu giữa nhiều component không cùng cấp, bạn cần Global state. Đây là loại state nằm ngoài component cụ thể, thường được quản lý bằng Context API hoặc các thư viện như Redux, Zustand, Recoil...

Dùng để:

• Quản lý người dùng đăng nhập
• Cài đặt giao diện (theme, ngôn ngữ)
• Giỏ hàng trong e-commerce...

Ví dụ (dùng Context API):

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Navbar />
    </ThemeContext.Provider>
  );
}

function Navbar() {
  const theme = React.useContext(ThemeContext);
  return <div className={theme}>Thanh điều hướng</div>;
}

3. Derived State (State dẫn xuất)

Derived state không phải là state lưu trữ trực tiếp mà được tính toán dựa trên props hoặc các state khác. Bạn không nên lưu nó vào useState nếu không thực sự cần, mà nên tính toán trong quá trình render hoặc dùng useMemo.

Dùng để:

• Tạo dữ liệu hiển thị từ state khác
• Lọc, sắp xếp dữ liệu đầu vào

Ví dụ:

function Greeting({ user }) {
  const fullName = `\${user.firstName} \${user.lastName}`;
  return <p>Xin chào, {fullName}</p>;
}

4. Server State (State từ server)

Đây là loại state đến từ phía server, thường thông qua API. Nó có thể thay đổi ngoài tầm kiểm soát của ứng dụng, nên cần được xử lý đặc biệt. Thay vì useEffect + fetch, bạn nên dùng thư viện như React Query, SWR để dễ quản lý cache, loading, error.

Dùng để:

• Tải danh sách sản phẩm, bài viết
• Quản lý dữ liệu bất đồng bộ

Ví dụ (React Query):

import { useQuery } from '@tanstack/react-query';

function ProductList() {
  const { data, isLoading } = useQuery(['products'], fetchProducts);

  if (isLoading) return <p>Đang tải...</p>;
  return <ul>{data.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

5. URL State (State trong URL)

URL cũng có thể chứa thông tin phản ánh trạng thái hiện tại của ứng dụng, như filter, tab đang chọn, trang hiện tại... Dữ liệu này gọi là URL state.

Dùng để:

• Phân trang, tìm kiếm
• Cho phép chia sẻ URL giữ nguyên trạng thái giao diện

Ví dụ (React Router v6+):

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const keyword = searchParams.get('q');

  return <p>Từ khoá tìm kiếm: {keyword}</p>;
}

🔚 Tổng Kết

Việc hiểu rõ và chọn đúng loại state giúp bạn viết ứng dụng React sạch, hiệu quả và dễ mở rộng. Nếu bạn mới bắt đầu, hãy tập trung vào local và server state trước, sau đó tìm hiểu thêm global state và các kỹ thuật nâng cao hơn.