React Hooks Tìm hiểu Sâu: Phần 1 - useState và useEffect

Đây là phần đầu tiên của loạt bài khám phá React Hooks một cách sâu sắc. Trong bài viết này, chúng ta sẽ tìm hiểu hai hooks cơ bản nhất: useState và useEffect.

useState Hook

Hook useState cho phép bạn thêm state vào các functional components:

TypeScript

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Số đếm: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tăng</button>
    </div>
  );
}

Điểm chính

• State có thể là bất kỳ kiểu nào: number, string, object, array, v.v.
• Hàm setter có thể nhận một giá trị hoặc một hàm
• Cập nhật state kích hoạt re-renders

useEffect Hook

Hook useEffect cho phép bạn thực hiện side effects trong functional components:

TypeScript

import { useEffect, useState } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // Dependency array
 
  if (!user) return <div>Đang tải...</div>;
 
  return <div>{user.name}</div>;
}

Dependency Array

• Mảng rỗng []: Chạy một lần khi mount
• Không có mảng: Chạy trên mỗi render
• Với dependencies: Chạy khi dependencies thay đổi

Tiếp theo

Trong Phần 2, chúng ta sẽ khám phá useContext, useReducer và custom hooks. Hãy đón xem!