Bài 2: Hướng dẫn Sử dụng React Hooks

React Hooks (ra mắt từ React 16.8) cho phép bạn sử dụng State và các tính năng khác của React bên trong Functional Component mà không cần viết Class.

---

1. useState Hook

useState giúp tạo và quản lý state trong Functional Component.

import React, { useState } from 'react';

function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div className="search-box">
      <input
        type="text"
        placeholder="Tìm kiếm tài liệu Swantech..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>Từ khóa hiện tại: <strong>{searchTerm}</strong></p>
    </div>
  );
}

---

2. useEffect Hook

useEffect quản lý các Side Effect (tương tác dữ liệu bên ngoài như gọi API, đăng ký sự kiện, hoặc tương tác DOM).

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

function SystemStatus() {
  const [status, setStatus] = useState('Đang kết nối...');

  useEffect(() => {
    // Giả lập lấy trạng thái từ Server
    const timer = setTimeout(() => {
      setStatus('Hệ thống Swantech hoạt động ổn định 🟢');
    }, 1500);

    // Cleanup function khi component unmount
    return () => clearTimeout(timer);
  }, []); // [] rỗng nghĩa là chỉ chạy 1 lần khi component mount

  return <div className="status-badge">{status}</div>;
}

---

3. useContext Hook

useContext giúp chia sẻ dữ liệu giữa các Component ở nhiều cấp độ mà không cần truyền Props qua từng cấp (Prop Drilling).

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

const ThemeContext = createContext('light');

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <p>Giao diện hiện tại: {theme}</p>;
}