React hook useEffect Bạn Nên Tìm Hiểu

Side-effect là gì?

Side-effect là một khái niệm miêu tả các tính toán bên trong một hàm ảnh hưởng đến các đối tượng bên ngoài không thông qua đối số. Một ví dụ đơn giản về side-effect là việc gọi API để lấy dữ liệu từ một máy chủ.

useEffect dùng để làm gì?

useEffect được sử dụng để thực hiện các side-effect trong các thành phần components của React. Một số ví dụ về các side-effect mà bạn có thể sử dụng useEffect để thực hiện bao gồm:

• Gọi API để lấy dữ liệu
• Thay đổi tiêu đề cho trang
• Cập nhật các state của components

Cách sử dụng useEffect

useEffect có hai đối số:

• Callback: là một hàm thực hiện các side-effect mà bạn muốn thực hiện.
• Dependencies: là một mảng chứa các đối tượng mà useEffect sẽ phụ thuộc vào để thực hiện các side-effect.

Callbacks

Callback là một hàm thực hiện các side-effect mà bạn muốn thực hiện. Callback sẽ được gọi sau khi quá trình render của thành phần components hoàn tất.

Dependencies

Dependencies là một mảng chứa các đối tượng mà useEffect sẽ phụ thuộc vào để thực hiện các side-effect. Nếu bất kỳ đối tượng nào trong mảng dependencies thay đổi, thì callback sẽ được gọi lại.

import React, { useEffect } from "react";

function Example() {
  useEffect(() => {
    // Thực hiện các side-effect
  }, []);

  return (
    <div>
      // Nội dung components
    </div>
  );
}

Trong ví dụ trên, chúng ta sử dụng useEffect để thực hiện một side-effect đơn giản là in ra thông tin thời gian hiện tại. Callback trong useEffect không phụ thuộc vào bất kỳ đối tượng nào, vì vậy nó chỉ được gọi một lần, sau khi thành phần components render lần đầu tiên.

import React, { useEffect, useState } from "react";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Thực hiện các side-effect khi count thay đổi
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>Tăng thêm</button>
    </div>
  );
}

Trong ví dụ trên, chúng ta sử dụng useEffect để thực hiện một side-effect là in ra giá trị của count. Callback trong useEffect phụ thuộc vào đối tượng count, vì vậy nó sẽ được gọi lại mỗi khi count thay đổi.

Clean up

Một số side-effect có thể cần được clean up để tránh các vấn đề về hiệu suất. Ví dụ, nếu bạn sử dụng useEffect để đăng ký một sự kiện, thì bạn cần clean up sự kiện đó để tránh bị memory leak.

Để clean up một side-effect, bạn có thể trả về một hàm từ callback của useEffect. Hàm này sẽ được gọi khi thành phần components bị unmount.

Ví dụ

import React, { useEffect, useState } from "react";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Đăng ký một sự kiện

    return () => {
      // Gỡ đăng ký sự kiện
    };
  }, []);

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>Tăng thêm</button>
    </div>
  );
}

Kết luận

UseEffect rất quan trọng trong reactjs, nên học và làm bài tập cho quen, nâng cao kỹ nâng lập trình.

Xem thêm tại đây.