📘 Hướng dẫn chi tiết về React Hooks

Mục lục

1. Giới thiệu
2. Hooks cơ bản
   • useState
   • useEffect
   • useRef
3. Hooks trung gian
   • useContext
   • useReducer
   • useMemo và useCallback
4. Hooks nâng cao
5. Hooks với Redux
6. Thực hành tốt nhất
7. Tài nguyên tham khảo

1. Giới thiệu

Hooks là các hàm đặc biệt trong React cho phép bạn sử dụng trạng thái và chu kỳ sống trong các thành phần chức năng. Trước đây, việc này chỉ có thể thực hiện thông qua class components, nhưng với hooks, mọi thứ trở nên dễ dàng và thuận tiện hơn.

👉 Hooks đã được giới thiệu trong React 16.8.

2. Hooks cơ bản

🔹 useState

useState cho phép bạn quản lý trạng thái cục bộ trong một thành phần. Đây là cách đơn giản để khởi tạo và cập nhật trạng thái.

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clickeado {count} lần
    </button>
  );
}

📌 Hãy học:

• Khởi tạo trạng thái
• Cập nhật trạng thái với setState
• Quản lý nhiều trạng thái

🔹 useEffect

useEffect cho phép bạn thực hiện các hiệu ứng phụ như lấy dữ liệu, thiết lập thời gian, hoặc thay đổi DOM.

import { useEffect, useState } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(interval); // dọn dẹp
  }, []);

  return <p>Giây: {seconds}</p>;
}

📌 Hãy học:

• Sự khác nhau giữa [], [dependencies], và không có dependencies.
• Sử dụng cleanup để dọn dẹp khi component bị hủy (tương tự như componentWillUnmount).

🔹 useRef

useRef giữ các giá trị bền vững mà không gây ra việc render lại.

import { useRef } from "react";

function InputFocus() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Tập trung</button>
    </>
  );
}

📌 Hãy học:

• Sử dụng các tham chiếu đến các nút DOM
• Lưu trữ các giá trị giữa các lần render

3. Hooks trung gian

🔹 useContext

useContext cho phép bạn tránh việc truyền props qua nhiều cấp độ bằng cách chia sẻ trạng thái toàn cục.

const ThemeContext = React.createContext();

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

function Navbar() {
  const theme = React.useContext(ThemeContext);
  return <h1>Chủ đề: {theme}</h1>;
}

🔹 useReducer

useReducer là một lựa chọn khác cho useState khi bạn cần logic trạng thái phức tạp (giống như Redux nhưng cục bộ).

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });

  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

🔹 useMemo và useCallback

Các hook này giúp tối ưu hóa bằng cách tránh các tính toán hoặc render lại không cần thiết.

const result = useMemo(() => expensiveCalculation(data), [data]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

4. Hooks nâng cao

• Custom Hooks: cho phép bạn đóng gói logic có thể tái sử dụng.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return width;
}

function App() {
  const width = useWindowWidth();
  return <p>Chiều rộng: {width}</p>;
}

• useLayoutEffect: tương tự như useEffect, nhưng được gọi trước khi render hiển thị (trong một số trường hợp đặc biệt).
• useImperativeHandle: cho phép kiểm soát các refs trong thành phần.

5. Hooks với Redux

• useDispatch: dùng để gửi các hành động.
• useSelector: dùng để đọc trạng thái từ store.

import { useSelector, useDispatch } from "react-redux";
import { increment } from "./counterSlice";

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
    </>
  );
}

6. Thực hành tốt nhất

• Không gọi hooks trong các điều kiện hoặc vòng lặp.
• Luôn ở mức độ cao nhất của thành phần.
• Tên của custom hooks bắt đầu bằng use....
• Chia nhỏ logic thành các hooks có thể tái sử dụng.

7. Tài nguyên tham khảo

• 📖 Tài liệu chính thức về React Hooks
• 🎥 Các video hướng dẫn trên YouTube (Net Ninja, Midudev, Web Dev Simplified)
• 🧪 Thực hành với CodeSandbox hoặc Vite + React

👉 Tôi gợi ý một lộ trình học tập trong 2 tuần:

1. (Ngày 1-3) useState, useEffect
2. (Ngày 4-5) useRef, useContext
3. (Ngày 6-7) useReducer
4. (Tuần 2) useMemo, useCallback, custom hooks
5. (Cuối cùng) Tích hợp với Redux hooks

Bài tập thực hành (dạng mini dự án) để củng cố kiến thức về từng hook.