💪Các loại hook?

Các loại hook phổ biến:

1. useState:

• Dùng để quản lý state của component.

• Giúp bạn tạo, cập nhật và đọc state một cách dễ dàng.

2. useContext:

• Dùng để truy cập context từ component con.

• Giúp bạn chia sẻ dữ liệu giữa các component không liên quan trực tiếp với nhau.

3. useReducer:

• Dùng để quản lý state phức tạp hơn useState.

• Giúp bạn tổ chức logic quản lý state theo kiểu reducer.

4. useRef:

• Dùng để truy cập và thao tác với các DOM node hoặc các instance của class component.

• Giúp bạn tạo reference cho các phần tử trong component.

5. useMemo:

• Dùng để ghi nhớ giá trị trả về của một hàm.

• Giúp bạn tối ưu hóa hiệu suất render bằng cách tránh tính toán lại giá trị không cần thiết.

6. useCallback:

• Dùng để ghi nhớ một hàm.

• Giúp bạn tránh tạo ra hàm mới mỗi khi render component, dẫn đến cải thiện hiệu suất.

7. useLayoutEffect:

• Tương tự như useEffect, nhưng được thực thi đồng bộ sau khi DOM được cập nhật.

• Dùng cho các trường hợp cần thực hiện các tác vụ phụ thuộc vào layout của DOM.

8. useImperativeHandle:

• Dùng để cung cấp một reference cho các component con có thể sử dụng để tương tác với component cha.

• Giúp bạn tạo API tùy chỉnh cho component.

9. useDebugValue:

• Dùng để ghi log giá trị của một biến trong component.

• Giúp bạn debug code dễ dàng hơn.

10. useTransition:

• Dùng để quản lý các trạng thái chuyển tiếp (transition) trong component.

• Giúp bạn tạo các hiệu ứng động (animation) mượt mà và hiệu quả.

Ví dụ về custom hook:

Bạn có thể custom hook để giải quyết các vấn đề cụ thể trong ứng dụng của mình. Ví dụ:

• Custom hook để lấy dữ liệu API:

JavaScript

import { useState, useEffect } from 'react';

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

• Custom hook để quản lý form:

JavaScript

import { useState } from 'react';

const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Xử lý submit form
  };

  return { values, handleChange, handleSubmit };
};

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

Kết luận:

React cung cấp nhiều hook mạnh mẽ giúp bạn xây dựng các component dễ dàng và hiệu quả. Việc sử dụng hook hiệu quả giúp bạn viết code dễ đọc, dễ bảo trì và cải thiện hiệu suất ứng dụng.

Ngoài ra, bạn có thể custom hook để giải quyết các vấn đề cụ thể trong ứng dụng của mình. Custom hook giúp bạn tái sử dụng logic và tổ chức code hiệu quả hơn.