Question React Hooks:

React Hooks:

1. React Hooks là gì và tại sao chúng được sử dụng?

   • React Hooks là một tính năng giúp bạn sử dụng state và các tính năng React khác mà không cần sử dụng các lớp.

   • Chúng được sử dụng để tái sử dụng logic component, gọn nhẹ hơn và dễ dàng kiểm soát hơn.

2. Các quy tắc của React Hooks là gì?

   • Hooks chỉ được gọi từ trong function component React hoặc từ custom hooks.

   • Hooks chỉ được gọi ở "top level" của function component, không được gọi trong các loops, conditions, hoặc nested functions.

   • Tên của custom hooks phải bắt đầu bằng "use".

3. Có những hooks nào trong React?

   • useState: Sử dụng để thêm state vào function component.

   • useEffect: Sử dụng để thực hiện các side effects trong function component.

   • useContext: Sử dụng để truy cập context trong function component.

   • useMemo và useCallback: Sử dụng để tối ưu hóa performance bằng cách tránh render lại không cần thiết.

   • useRef: Sử dụng để truy cập các DOM nodes hoặc lưu trữ mutable values.

4. Sự khác biệt giữa useState và useReducer là gì?

   • useState là một hook đơn giản để quản lý state với giá trị cụ thể.

   • useReducer là một hook mạnh mẽ hơn, cho phép bạn quản lý state phức tạp với các action.

5. Làm thế nào để tạo một custom hook?

   • Tạo một function JavaScript bắt đầu bằng "use" để đảm bảo là hook.

   • Sử dụng các hooks có sẵn hoặc gọi hooks khác nếu cần thiết.

   • Trả về các giá trị hoặc hàm mà bạn muốn tái sử dụng trong các component khác.

6. Khi nào bạn nên sử dụng useEffect?

   • Khi bạn muốn thực hiện các side effects trong function component, như gọi API, thao tác với DOM, hoặc subscribe vào events.

7. Tại sao bạn cần cleanup function trong useEffect?

   • Cleanup function trong useEffect được sử dụng để xử lý các tài nguyên không cần thiết, như hủy bỏ subscriptions hoặc xóa các timers.

8. Làm thế nào để tối ưu hóa performance với useMemo và useCallback?

   • Sử dụng useMemo để lưu trữ kết quả của một hàm hoặc biểu thức, tránh tính toán lại trong mỗi lần render.

   • Sử dụng useCallback để tránh render lại các hàm callback khi dependencies không thay đổi.

9. Hooks có nhược điểm nào không?

   • Hooks cần một số hiểu biết về JavaScript và React để sử dụng hiệu quả.

   • Sự thay đổi cú pháp có thể làm khó khăn cho việc chuyển đổi từ class component sang function component.

10. Làm thế nào để xử lý side effects không phụ thuộc vào state trong useEffect?

    • Sử dụng một array rỗng [] làm tham số thứ hai của useEffect để chỉ thực hiện side effects khi component được mount và unmount, mà không phụ thuộc vào bất kỳ state nào.