React Hooks:
Hướng Dẫn Toàn Diện

Giới Thiệu

React Hooks đã cách mạng hóa cách chúng ta viết các component trong React.
Chúng cho phép bạn sử dụng state và các tính năng khác của React mà không cần phải viết class.

Hook useState

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

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Bạn đã click {count} lần</p>
      <button onClick={() => setCount(count + 1)}>
        Click vào tôi
      </button>
    </div>
  );
}

Hook useEffect

Hook useEffect cho phép bạn thực hiện các side effect trong functional component:

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

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

  useEffect(() => {
    document.title = `Bạn đã click ${count} lần`;
  });

  return (
    <div>
      <p>Bạn đã click {count} lần</p>
      <button onClick={() => setCount(count + 1)}>
        Click vào tôi
      </button>
    </div>
  );
}

Kết Luận

React Hooks cung cấp API trực tiếp hơn cho các khái niệm React mà bạn đã biết.
Chúng giúp code của bạn dễ đọc và dễ kiểm thử hơn.