Các loại hook cơ bản trong React (phần 1)

Hook là gì?

Các Functions có tên bắt đầu bằng “use” được gọi là Hooks(ví dụ: useState)

Hooks có nhiều hạn chế hơn các functions khác. Bạn chỉ có thể gọi Hooks ở đầu các Components của mình (hoặc các Hooks khác). Nếu bạn muốn sử dụng useState trong một điều kiện(if) hoặc một vòng lặp(foreach), hãy tạo một component mới và đặt nó vào đó.

Dưới đây là các hooks cơ bản:

1.useState

useState là hook cho phép thêm biến “state” đến component của bạn(functional components), giúp cập nhật UI mỗi khi data thay đổi.

– Cách sử dụng :

const [state, setState] = useState(initialState);

state: định nghĩa tên biến để lưu giá trị của state
setState: không được thay đổi giá trị của state một cách trực tiếp mà phải thông qua hàm này
initialState: đây là giá trị khởi tạo của state và chỉ có ý nghĩa ở lần đầu tiên khi khởi tạo state
– Hook này được sử dụng trong các trường hợp:

+Thêm state vào một component(functional component)

import { useState } from 'react';


function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...

+Cập nhật state dựa trên state trước
+Cập nhật objects and arrays trong state
+Tránh tạo lại initial state(trạng thái ban đầu)
+Đặt lại state bằng phím
+Cập nhật UI mỗi khi data thay đổi
Lưu ý khi sử dụng useState:
1. Không nên thay đổi state trực tiếp mà sử dụng hàm setState để đảm bảo tính không đổi của state.
2. Không nên sử dụng nhiều state trong một component để đảm bảo cho logic component  rõ ràng và dễ hiểu.
3. Nếu mỗi state liên quan đến một khía cạnh cụ thể của component thì có thể sử dụng nhiều state
4. Ngoài ra có 1 hook khác của reat là “useReducer” được sử dụng cho state phức tạp hoặc xử logic state phức tạp. Chi tiết về hook này xem tiếp ở bài Các loại hook cơ bản trong React(phần 2)

Hãy thử chạy đoạn code sau để hiểu rõ hơn cách sử dụng useState

import { useState } from 'react';


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


  function handleClick() {
    setCount(count + 1);
  }


  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

Nguồn dịch(https://react.dev/reference/react/useState)