Vòng đời của Reactive Effects

Vòng đời của một Effect

Mọi React component đều trải qua cùng một vòng đời:

• Một component mount khi nó được thêm vào màn hình.
• Một component update khi nó nhận được props hoặc state mới, thường để phản hồi lại một tương tác.
• Một component unmount khi nó được loại bỏ khỏi màn hình.

Đó là một cách tốt để nghĩ về component, nhưng không phải về Effect. Thay vào đó, hãy cố gắng nghĩ về từng Effect một cách độc lập với vòng đời của component. Một Effect mô tả cách đồng bộ hóa một hệ thống bên ngoài với props và state hiện tại. Khi code của bạn thay đổi, việc đồng bộ hóa sẽ cần xảy ra nhiều hơn hoặc ít hơn.

Để minh họa điểm này, hãy xem xét Effect này kết nối component của bạn với một chat server:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

Body của Effect chỉ định cách bắt đầu đồng bộ hóa:

    // ...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
    // ...

Function cleanup được trả về bởi Effect chỉ định cách ngừng đồng bộ hóa:

    // ...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
    // ...

Theo trực giác, bạn có thể nghĩ rằng React sẽ bắt đầu đồng bộ hóa khi component mount và ngừng đồng bộ hóa khi component unmount. Tuy nhiên, đây không phải là kết thúc của câu chuyện! Đôi khi, cũng có thể cần bắt đầu và ngừng đồng bộ hóa nhiều lần trong khi component vẫn được mount.

Hãy xem tại sao điều này cần thiết, khi nào nó xảy ra, và cách bạn có thể kiểm soát hành vi này.

Tại sao việc đồng bộ hóa có thể cần xảy ra nhiều lần

Hãy tưởng tượng component ChatRoom này nhận một prop roomId mà người dùng chọn trong một dropdown. Giả sử ban đầu người dùng chọn phòng "general" làm roomId. Ứng dụng của bạn hiển thị phòng chat "general":

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId /* "general" */ }) {
  // ...
  return <h1>Welcome to the {roomId} room!</h1>;
}

Sau khi UI được hiển thị, React sẽ chạy Effect để bắt đầu đồng bộ hóa. Nó kết nối với phòng "general":

function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Connects to the "general" room
    connection.connect();
    return () => {
      connection.disconnect(); // Disconnects from the "general" room
    };
  }, [roomId]);
  // ...

Tới đây, mọi thứ vẫn ổn.

Sau đó, người dùng chọn một phòng khác trong dropdown (ví dụ, "travel"). Trước tiên, React sẽ cập nhật UI:

function ChatRoom({ roomId /* "travel" */ }) {
  // ...
  return <h1>Welcome to the {roomId} room!</h1>;
}

Hãy nghĩ về những gì sẽ xảy ra tiếp theo. Người dùng thấy rằng "travel" là phòng chat được chọn trong UI. Tuy nhiên, Effect đã chạy lần cuối vẫn còn kết nối với phòng "general". Prop roomId đã thay đổi, vì vậy những gì Effect của bạn đã làm trước đó (kết nối với phòng "general") không còn khớp với UI nữa.

Tại thời điểm này, bạn muốn React thực hiện hai việc:

1. Ngừng đồng bộ hóa với roomId cũ (ngắt kết nối khỏi phòng "general")
2. Bắt đầu đồng bộ hóa với roomId mới (kết nối với phòng "travel")

May mắn thay, bạn đã dạy React cách thực hiện cả hai việc này! Body Effect của bạn chỉ định cách bắt đầu đồng bộ hóa, và function cleanup chỉ định cách ngừng đồng bộ hóa. Tất cả những gì React cần làm bây giờ là gọi chúng theo đúng thứ tự và với props và state đúng. Hãy xem chính xác điều đó xảy ra như thế nào.

React đồng bộ hóa lại Effect của bạn như thế nào

Hãy nhớ lại rằng component ChatRoom của bạn đã nhận một giá trị mới cho prop roomId. Trước đó là "general", và bây giờ là "travel". React cần đồng bộ hóa lại Effect để kết nối lại bạn với một phòng khác.

Để ngừng đồng bộ hóa, React sẽ gọi function cleanup mà Effect của bạn trả về sau khi kết nối với phòng "general". Vì roomId là "general", function cleanup ngắt kết nối khỏi phòng "general":

function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Connects to the "general" room
    connection.connect();
    return () => {
      connection.disconnect(); // Disconnects from the "general" room
    };
    // ...

Sau đó React sẽ chạy Effect mà bạn đã cung cấp trong lần render này. Lần này, roomId là "travel" nên nó sẽ bắt đầu đồng bộ hóa với phòng chat "travel" (cho đến khi function cleanup của nó cũng được gọi):

function ChatRoom({ roomId /* "travel" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Connects to the "travel" room
    connection.connect();
    // ...

Nhờ điều này, bây giờ bạn đã kết nối với cùng phòng mà người dùng đã chọn trong UI. Tránh được thảm họa!

Mỗi lần sau khi component render lại với một roomId khác, Effect của bạn sẽ đồng bộ hóa lại. Ví dụ, giả sử người dùng thay đổi roomId từ "travel" thành "music". React sẽ lại ngừng đồng bộ hóa Effect của bạn bằng cách gọi function cleanup (ngắt kết nối bạn khỏi phòng "travel"). Sau đó nó sẽ bắt đầu đồng bộ hóa lại bằng cách chạy body với prop roomId mới (kết nối bạn với phòng "music").

Cuối cùng, khi người dùng chuyển sang một màn hình khác, ChatRoom unmount. Bây giờ không cần phải duy trì kết nối nữa. React sẽ ngừng đồng bộ hóa Effect của bạn lần cuối cùng và ngắt kết nối bạn khỏi phòng chat "music".

Suy nghĩ từ góc độ của Effect

Hãy tóm tắt mọi thứ đã xảy ra từ góc độ của component ChatRoom:

1. ChatRoom mount với roomId được đặt thành "general"
2. ChatRoom update với roomId được đặt thành "travel"
3. ChatRoom update với roomId được đặt thành "music"
4. ChatRoom unmount

Trong mỗi điểm này trong vòng đời của component, Effect của bạn đã làm những việc khác nhau:

1. Effect của bạn kết nối với phòng "general"
2. Effect của bạn ngắt kết nối khỏi phòng "general" và kết nối với phòng "travel"
3. Effect của bạn ngắt kết nối khỏi phòng "travel" và kết nối với phòng "music"
4. Effect của bạn ngắt kết nối khỏi phòng "music"

Bây giờ hãy nghĩ về những gì đã xảy ra từ góc độ của chính Effect:

  useEffect(() => {
    // Your Effect connected to the room specified with roomId...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      // ...until it disconnected
      connection.disconnect();
    };
  }, [roomId]);

Cấu trúc của code này có thể truyền cảm hứng cho bạn để thấy những gì đã xảy ra như một chuỗi các khoảng thời gian không chồng chéo:

1. Effect của bạn kết nối với phòng "general" (cho đến khi nó ngắt kết nối)
2. Effect của bạn kết nối với phòng "travel" (cho đến khi nó ngắt kết nối)
3. Effect của bạn kết nối với phòng "music" (cho đến khi nó ngắt kết nối)

Trước đây, bạn đang suy nghĩ từ góc độ của component. Khi bạn nhìn từ góc độ của component, có thể dễ dàng nghĩ về Effect như “callback” hoặc “lifecycle event” được kích hoạt tại một thời điểm như “sau một lần render” hoặc “trước khi unmount”. Cách suy nghĩ này trở nên phức tạp rất nhanh, vì vậy tốt nhất là tránh.

Thay vào đó, hãy luôn tập trung vào một chu kỳ bắt đầu/dừng duy nhất tại một thời điểm. Không quan trọng liệu component đang mount, update, hay unmount. Tất cả những gì bạn cần làm là mô tả cách bắt đầu đồng bộ hóa và cách dừng nó. Nếu bạn làm tốt, Effect của bạn sẽ chịu đựng được việc được bắt đầu và dừng bao nhiêu lần cần thiết.

Điều này có thể nhắc nhở bạn về cách bạn không nghĩ liệu component đang mount hoặc update khi bạn viết logic rendering tạo JSX. Bạn mô tả những gì nên có trên màn hình, và React tìm ra phần còn lại.

React xác minh rằng Effect của bạn có thể đồng bộ hóa lại như thế nào

Đây là một ví dụ trực tiếp mà bạn có thể chơi với. Nhấn “Open chat” để mount component ChatRoom:

Lưu ý rằng khi component mount lần đầu tiên, bạn thấy ba log:

1. ✅ Connecting to "general" room at https://localhost:1234... (chỉ trong development)
2. ❌ Disconnected from "general" room at https://localhost:1234. (chỉ trong development)
3. ✅ Connecting to "general" room at https://localhost:1234...

Hai log đầu tiên chỉ dành cho development. Trong development, React luôn remount mỗi component một lần.

React xác minh rằng Effect của bạn có thể đồng bộ hóa lại bằng cách buộc nó thực hiện điều đó ngay lập tức trong development. Điều này có thể nhắc nhở bạn về việc mở cửa và đóng nó thêm một lần để kiểm tra xem ổ khóa cửa có hoạt động không. React bắt đầu và dừng Effect của bạn thêm một lần trong development để kiểm tra bạn đã triển khai function cleanup tốt chưa.

Lý do chính Effect của bạn sẽ đồng bộ hóa lại trong thực tế là nếu một số data mà nó sử dụng đã thay đổi. Trong sandbox ở trên, hãy thay đổi phòng chat được chọn. Lưu ý cách, khi roomId thay đổi, Effect của bạn đồng bộ hóa lại.

Tuy nhiên, cũng có những trường hợp bất thường hơn mà việc đồng bộ hóa lại là cần thiết. Ví dụ, hãy thử chỉnh sửa serverUrl trong sandbox ở trên trong khi chat đang mở. Lưu ý cách Effect đồng bộ hóa lại để phản hồi lại các chỉnh sửa của bạn đối với code. Trong tương lai, React có thể thêm nhiều tính năng hơn dựa trên việc đồng bộ hóa lại.

React biết rằng nó cần đồng bộ hóa lại Effect như thế nào

Bạn có thể tự hỏi React biết rằng Effect của bạn cần đồng bộ hóa lại sau khi roomId thay đổi như thế nào. Đó là bởi vì bạn đã nói với React rằng code của nó phụ thuộc vào roomId bằng cách bao gồm nó trong danh sách dependency:

function ChatRoom({ roomId }) { // The roomId prop may change over time
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // This Effect reads roomId 
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]); // So you tell React that this Effect "depends on" roomId
  // ...

Đây là cách hoạt động của nó:

1. Bạn biết roomId là một prop, có nghĩa là nó có thể thay đổi theo thời gian.
2. Bạn biết rằng Effect đọc roomId (do đó logic của nó phụ thuộc vào giá trị có thể thay đổi sau này).
3. Đây là lý do tại sao bạn chỉ định nó như dependency của Effect (để nó đồng bộ hóa lại khi roomId thay đổi).

Mỗi lần sau khi component render lại, React sẽ xem xét mảng các dependency mà bạn đã truyền. Nếu bất kỳ giá trị nào trong mảng khác với giá trị tại cùng vị trí mà bạn đã truyền trong lần render trước, React sẽ đồng bộ hóa lại Effect của bạn.

Ví dụ, nếu bạn truyền ["general"] trong lần render đầu tiên, và sau đó bạn truyền ["travel"] trong lần render tiếp theo, React sẽ so sánh "general" và "travel". Đây là những giá trị khác nhau (so sánh với Object.is), do đó React sẽ đồng bộ hóa lại Effect của bạn. Mặt khác, nếu component render lại nhưng roomId không thay đổi, Effect của bạn sẽ vẫn kết nối với cùng phòng.

Mỗi Effect đại diện cho một quá trình đồng bộ hóa riêng biệt

Hãy tránh thêm logic không liên quan vào Effect của bạn chỉ vì logic này cần chạy cùng lúc với Effect mà bạn đã viết. Ví dụ, giả sử bạn muốn gửi một sự kiện analytics khi người dùng truy cập phòng. Bạn đã có một Effect phụ thuộc vào roomId, vì vậy bạn có thể muốn thêm cuộc gọi analytics vào đó:

function ChatRoom({ roomId }) {
  useEffect(() => {
    logVisit(roomId);
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

Nhưng hãy tưởng tượng sau này bạn thêm một dependency khác vào Effect này mà cần thiết lập lại kết nối. Nếu Effect này đồng bộ hóa lại, nó cũng sẽ gọi logVisit(roomId) cho cùng phòng, điều mà bạn không có ý định. Ghi log lần truy cập là một quá trình riêng biệt so với việc kết nối. Viết chúng như hai Effect riêng biệt:

function ChatRoom({ roomId }) {
  useEffect(() => {
    logVisit(roomId);
  }, [roomId]);

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    // ...
  }, [roomId]);
  // ...
}

Mỗi Effect trong code của bạn nên đại diện cho một quá trình đồng bộ hóa riêng biệt và độc lập.

Trong ví dụ trên, việc xóa một Effect sẽ không làm hỏng logic của Effect khác. Đây là dấu hiệu tốt cho thấy chúng đồng bộ hóa những thứ khác nhau, và vì vậy việc tách chúng ra là hợp lý. Mặt khác, nếu bạn tách một phần logic gắn kết thành các Effect riêng biệt, code có thể trông “sạch sẽ” hơn nhưng sẽ khó duy trì hơn. Đây là lý do tại sao bạn nên suy nghĩ xem các quá trình có giống nhau hay riêng biệt, chứ không phải xem code có trông sạch hơn hay không.

Effect “phản ứng” với các giá trị reactive

Effect của bạn đọc hai biến (serverUrl và roomId), nhưng bạn chỉ chỉ định roomId làm dependency:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

Tại sao serverUrl không cần là một dependency?

Điều này là vì serverUrl không bao giờ thay đổi do việc render lại. Nó luôn giống nhau bất kể component render lại bao nhiêu lần và vì lý do gì. Vì serverUrl không bao giờ thay đổi, việc chỉ định nó làm dependency sẽ không có ý nghĩa. Xét cho cùng, dependency chỉ có tác dụng khi chúng thay đổi theo thời gian!

Mặt khác, roomId có thể khác trong lần render lại. Props, state, và các giá trị khác được khai báo bên trong component là reactive vì chúng được tính toán trong quá trình rendering và tham gia vào luồng data của React.

Nếu serverUrl là một biến state, nó sẽ là reactive. Các giá trị reactive phải được bao gồm trong dependency:

function ChatRoom({ roomId }) { // Props change over time
  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // State may change over time

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Your Effect reads props and state
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId, serverUrl]); // So you tell React that this Effect "depends on" on props and state
  // ...
}

Bằng cách bao gồm serverUrl làm dependency, bạn đảm bảo rằng Effect đồng bộ hóa lại sau khi nó thay đổi.

Hãy thử thay đổi phòng chat được chọn hoặc chỉnh sửa URL server trong sandbox này:

Bất cứ khi nào bạn thay đổi một giá trị reactive như roomId hoặc serverUrl, Effect sẽ kết nối lại với chat server.

Ý nghĩa của một Effect với dependency rỗng

Điều gì xảy ra nếu bạn di chuyển cả serverUrl và roomId ra ngoài component?

const serverUrl = 'https://localhost:1234';
const roomId = 'general';

function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []); // ✅ All dependencies declared
  // ...
}

Bây giờ code Effect của bạn không sử dụng bất kỳ giá trị reactive nào, vì vậy dependencies của nó có thể rỗng ([]).

Suy nghĩ từ góc độ của component, mảng dependency rỗng [] có nghĩa là Effect này kết nối với phòng chat chỉ khi component mount, và ngắt kết nối chỉ khi component unmount. (Hãy nhớ rằng React vẫn sẽ đồng bộ hóa lại nó thêm một lần nữa trong development để kiểm tra logic của bạn.)

Tuy nhiên, nếu bạn suy nghĩ từ góc độ của Effect, bạn không cần nghĩ về mounting và unmounting chút nào. Điều quan trọng là bạn đã chỉ định những gì Effect của bạn làm để bắt đầu và dừng đồng bộ hóa. Hôm nay, nó không có dependencies reactive. Nhưng nếu bạn muốn người dùng thay đổi roomId hoặc serverUrl theo thời gian (và chúng sẽ trở thành reactive), code Effect của bạn sẽ không thay đổi. Bạn sẽ chỉ cần thêm chúng vào dependencies.

Tất cả các biến được khai báo trong body component đều là reactive

Props và state không phải là những giá trị reactive duy nhất. Các giá trị mà bạn tính toán từ chúng cũng là reactive. Nếu props hoặc state thay đổi, component của bạn sẽ render lại, và các giá trị được tính toán từ chúng cũng sẽ thay đổi. Đây là lý do tại sao tất cả các biến từ body component được sử dụng bởi Effect nên có trong danh sách dependency của Effect.

Giả sử người dùng có thể chọn một chat server trong dropdown, nhưng họ cũng có thể cấu hình một server mặc định trong cài đặt. Giả sử bạn đã đặt state cài đặt trong một context để bạn đọc settings từ context đó. Bây giờ bạn tính toán serverUrl dựa trên server được chọn từ props và server mặc định:

function ChatRoom({ roomId, selectedServerUrl }) { // roomId is reactive
  const settings = useContext(SettingsContext); // settings is reactive
  const serverUrl = selectedServerUrl ?? settings.defaultServerUrl; // serverUrl is reactive
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Your Effect reads roomId and serverUrl
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId, serverUrl]); // So it needs to re-synchronize when either of them changes!
  // ...
}

Trong ví dụ này, serverUrl không phải là một prop hoặc biến state. Nó là một biến thông thường mà bạn tính toán trong quá trình rendering. Nhưng nó được tính toán trong quá trình rendering, vì vậy nó có thể thay đổi do việc render lại. Đây là lý do tại sao nó là reactive.

Tất cả các giá trị bên trong component (bao gồm props, state, và các biến trong body component của bạn) đều là reactive. Bất kỳ giá trị reactive nào cũng có thể thay đổi trong lần render lại, vì vậy bạn cần bao gồm các giá trị reactive làm dependencies của Effect.

Nói cách khác, Effect “phản ứng” với tất cả các giá trị từ body component.

React xác minh rằng bạn đã chỉ định mọi giá trị reactive làm dependency

Nếu linter của bạn được cấu hình cho React, nó sẽ kiểm tra rằng mọi giá trị reactive được sử dụng bởi code Effect của bạn đều được khai báo làm dependency của nó. Ví dụ, đây là một lỗi lint vì cả roomId và serverUrl đều là reactive:

Điều này có thể trông giống như một lỗi React, nhưng thực sự React đang chỉ ra một bug trong code của bạn. Cả roomId và serverUrl đều có thể thay đổi theo thời gian, nhưng bạn đang quên đồng bộ hóa lại Effect của bạn khi chúng thay đổi. Bạn sẽ vẫn kết nối với roomId và serverUrl ban đầu ngay cả sau khi người dùng chọn các giá trị khác trong UI.

Để sửa bug, hãy làm theo gợi ý của linter để chỉ định roomId và serverUrl làm dependencies của Effect:

function ChatRoom({ roomId }) { // roomId is reactive
  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // serverUrl is reactive
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]); // ✅ All dependencies declared
  // ...
}

Hãy thử sửa lỗi này trong sandbox ở trên. Xác minh rằng lỗi linter đã biến mất, và chat kết nối lại khi cần thiết.

Làm gì khi bạn không muốn đồng bộ hóa lại

Trong ví dụ trước, bạn đã sửa lỗi lint bằng cách liệt kê roomId và serverUrl làm dependencies.

Tuy nhiên, thay vào đó bạn có thể “chứng minh” với linter rằng những giá trị này không phải là giá trị reactive, tức là chúng không thể thay đổi do việc render lại. Ví dụ, nếu serverUrl và roomId không phụ thuộc vào rendering và luôn có cùng giá trị, bạn có thể di chuyển chúng ra ngoài component. Bây giờ chúng không cần phải là dependencies:

const serverUrl = 'https://localhost:1234'; // serverUrl is not reactive
const roomId = 'general'; // roomId is not reactive

function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []); // ✅ All dependencies declared
  // ...
}

Bạn cũng có thể di chuyển chúng vào bên trong Effect. Chúng không được tính toán trong quá trình rendering, vì vậy chúng không phải là reactive:

function ChatRoom() {
  useEffect(() => {
    const serverUrl = 'https://localhost:1234'; // serverUrl is not reactive
    const roomId = 'general'; // roomId is not reactive
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []); // ✅ All dependencies declared
  // ...
}

Effect là những khối code reactive. Chúng đồng bộ hóa lại khi các giá trị bạn đọc bên trong chúng thay đổi. Không giống như event handler chỉ chạy một lần cho mỗi tương tác, Effect chạy bất cứ khi nào việc đồng bộ hóa là cần thiết.

Bạn không thể “chọn” dependencies của mình. Dependencies của bạn phải bao gồm mọi giá trị reactive mà bạn đọc trong Effect. Linter thực thi điều này. Đôi khi điều này có thể dẫn đến các vấn đề như vòng lặp vô hạn và làm cho Effect của bạn đồng bộ hóa lại quá thường xuyên. Đừng sửa những vấn đề này bằng cách loại bỏ linter! Thay vào đó hãy thử những điều sau:

• Kiểm tra rằng Effect của bạn đại diện cho một quá trình đồng bộ hóa độc lập. Nếu Effect của bạn không đồng bộ hóa bất cứ thứ gì, nó có thể không cần thiết. Nếu nó đồng bộ hóa nhiều thứ độc lập, hãy tách nó ra.

• Nếu bạn muốn đọc giá trị mới nhất của props hoặc state mà không “phản ứng” với nó và đồng bộ hóa lại Effect, bạn có thể tách Effect của mình thành một phần reactive (mà bạn sẽ giữ trong Effect) và một phần non-reactive (mà bạn sẽ trích xuất thành thứ được gọi là Effect Event). Đọc về việc tách Events khỏi Effects.

• Tránh dựa vào các object và function làm dependencies. Nếu bạn tạo các object và function trong quá trình rendering và sau đó đọc chúng từ Effect, chúng sẽ khác nhau trong mỗi lần render. Điều này sẽ khiến Effect của bạn đồng bộ hóa lại mỗi lần. Đọc thêm về việc loại bỏ các dependencies không cần thiết khỏi Effects.

useEffect(() => {
  // ...
  // 🔴 Avoid suppressing the linter like this:
  // eslint-ignore-next-line react-hooks/exhaustive-deps
}, []);