Bài 5. useState & useEffect – Hook vào “nội lực” của React

Sau khi bạn đã nắm chắc sự kiện và quản lý dữ liệu nhập vào, thì giờ là lúc chúng ta tiếp cận nội công thâm hậu của React: Hooks, đặc biệt là hai hook quan trọng nhất – useState và useEffect.

---

React “thông minh” là nhờ đâu?

Bạn có từng thắc mắc:

• Làm sao React biết để re-render component khi dữ liệu thay đổi?
• Làm sao để chạy 1 đoạn code mỗi khi component load xong, hoặc khi dữ liệu thay đổi?
• Làm sao để đồng bộ hóa với các API, LocalStorage, hoặc hẹn giờ?

Tất cả đều nhờ vào hệ thống Hooks, mà useState và useEffect là hai “sư phụ đầu tiên” bạn cần thành thạo!

---

1. Nhắc lại: useState là gì?

useState cho phép bạn khai báo và cập nhật state trong function component.

Cú pháp:

📋 Copyconst [giatri, setGiatri] = useState(giaTriKhoiTao);

Mỗi lần bạn gọi setGiatri(...), React sẽ:

• Cập nhật giá trị mới
• Render lại component

---

Ví dụ: Đếm số lần click

📋 Copyimport { useState } from 'react';

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

  return (
    <div>
      <p>Bạn đã bấm {count} lần</p>
      <button onClick={() => setCount(count + 1)}>Tăng</button>
    </div>
  );
}

---

2. useEffect là gì?

useEffect giúp bạn chạy code phụ (side effects) như:

• Gọi API
• Tương tác DOM
• Lưu dữ liệu vào LocalStorage
• Set document.title
• Hẹn giờ, hoặc cleanup dữ liệu

---

Cú pháp:

📋 CopyuseEffect(() => {
  // Code muốn chạy sau khi render
}, [giatriPhuThuoc]);

• Nếu [] rỗng → chạy một lần duy nhất sau khi component mount
• Nếu có [state] → chạy mỗi khi state thay đổi
• Nếu bỏ qua tham số thứ 2 → chạy mỗi lần render

---

Ví dụ 1: Chạy một lần khi component mount

📋 CopyuseEffect(() => {
  console.log('Component đã xuất hiện trên giao diện!');
}, []);

---

Ví dụ 2: Theo dõi dữ liệu thay đổi

📋 CopyuseEffect(() => {
  console.log('Giá trị count đã thay đổi:', count);
}, [count]);

---

Ví dụ 3: Cập nhật tiêu đề trang

📋 Copyconst [name, setName] = useState('Ẩn danh');

useEffect(() => {
  document.title = `Chào ${name}`;
}, [name]);

---

3. Tạo đồng hồ bằng setInterval và useEffect

📋 Copyimport { useEffect, useState } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    // Cleanup khi component bị huỷ
    return () => clearInterval(timer);
  }, []);

  return <h2>Giờ hiện tại: {time}</h2>;
}

Giống như set một cái đồng hồ tự chạy, và tự dọn dẹp khi không cần nữa.

---

4. Tình huống thực tế: Gọi API khi component render

Giả sử bạn muốn lấy dữ liệu người dùng từ một API:

📋 Copyimport { useState, useEffect } from 'react';
import axios from 'axios';

function UserInfo() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users/1')
      .then(res => setUser(res.data))
      .catch(err => console.error(err));
  }, []);

  if (!user) return <p>Đang tải...</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

useEffect giúp bạn chạy axios khi component vừa render xong.

---

5. Cleanup trong useEffect (dọn dẹp)

Một số hiệu ứng như setInterval, WebSocket, EventListener cần được xoá đi khi component bị xoá để tránh rò rỉ bộ nhớ.

📋 CopyuseEffect(() => {
  const id = setInterval(...);
  return () => clearInterval(id);
}, []);

---

6. Bài tập thực hành

1. Tạo component PageTitleChanger

• Có 1 ô input
• Gõ vào thì document.title cập nhật theo nội dung

2. Component Timer

• Khi mở trang, tự động đếm giây từ 0, mỗi giây +1
• Hiển thị số giây

3. Component APIUser

• Dùng axios gọi https://jsonplaceholder.typicode.com/users/2
• Hiển thị tên + email người dùng

---

7. Tổng kết

Hook	Tác dụng
useState	Quản lý dữ liệu thay đổi theo thời gian
useEffect	Chạy code phụ sau khi render, gọi API, cập nhật DOM, cleanup…

Bạn đã bước vào “tầng sâu” của React rồi đó 😎

---

Kết bài – Hiểu Hook là làm chủ React

Giờ bạn đã biết:

• useState để thay đổi giao diện theo dữ liệu
• useEffect để chạy các tác vụ phụ

Và từ đây, bạn có thể:

• Làm ứng dụng thời gian thực
• Gọi API
• Giao tiếp với trình duyệt
• Quản lý logic cập nhật dữ liệu

---

Trong bài tiếp theo, bạn sẽ học cách làm đa trang với React Router – rất cần thiết cho mọi ứng dụng thực tế.

Hẹn gặp ở Bài 6: Điều hướng trong React với React Router