Trong phần 3 này, chúng ta sẽ tiếp tục tìm hiểu cách sử dụng hook useEffect

useEffect

useEffect là một React Hook cho phép bạn đồng bộ hóa component với hệ thống bên ngoài.

Cách sử dụng

useEffect(setup, dependencies?)

setup: The function với logic Effect ủa bạn. Nếu component unmount hoặc dependencies thay đổi, hàm cleanup sẽ được gọi để dọn dẹp các công việc side effect không cần thiết.

dependencies: Bao gồm list tất cả các phụ thuộc để tính toán logic bao gồm props, state, và tất cả các biến and functions được khai báo trực tiếp bên trong component của bạn(component body). Nếu các thành phần phụ thuộc này có sự thay đổi thì useEffect mới được tính toán lại.

Hook này được sử dụng trong các trường hợp:

• Gọi API
• Cập nhật DOM
• Đăng ký sự kiện trong functional components
• Kiểm soát a non-React widget
• Chỉ định các reactive dependencies
• Cập nhật state phụ thuộc vào state trước đó
• Xóa những đối tượng dependencies không cần thiết
• Xóa những hàm dependencies không cần thiết
• Đọc pros và state mới nhất từ Effect
• Hiển thị những nội dung khác nhau trên server và client

Mục đích sử dụng

• Thực hiện các công việc không thuần túy về render, như gọi API, thay đổi DOM, đăng ký sự kiện, và nhiều công việc khác.
• Giúp tránh tình trạng lặp vô hạn khi thực hiện các side effect.

Lưu ý khi sử dụng useEffect

• useEffect chỉ được gọi lại khi dependencies thay đổi
• Xác định rõ dependencies: Nếu có dependencies, hãy đảm bảo rằng bạn đã xác định chúng đúng cách để tránh tình trạng lặp vô hạn hoặc bất kỳ vấn đề nào khác liên quan đến lifecycle.
• Cleanup side effects: Nếu component unmount hoặc dependencies thay đổi, hàm cleanup sẽ được gọi để dọn dẹp các công việc side effect không cần thiết.
• Hạn chế việc sử dụng nhiều useEffect: Đôi khi, có thể gộp nhiều side effect vào một useEffect để làm cho code dễ đọc hơn, nhưng cũng cần lưu ý rằng quá nhiều side effect trong một useEffect có thể làm cho code trở nên phức tạp.

Ví dụ minh họa

Hãy chạy thử đoạn code sau để hiểu nó

import { useEffect } from 'react';

import { createConnection } from './chat.js';



function ChatRoom({ roomId }) {

const [serverUrl, setServerUrl] = useState('https://localhost:1234');



useEffect(() => {

const connection = createConnection(serverUrl, roomId);

connection.connect();

return () => {

connection.disconnect();

};

}, [serverUrl, roomId]);

// ...

}