23. useEffect trong React JS

useEffect là một trong những React Hook quan trọng, cho phép bạn thực hiện các tác vụ liên quan đến lifecycle của thành phần hàm trong React. useEffect được gọi sau mỗi lần render và thường được sử dụng để xử lý các tác vụ như lấy dữ liệu từ API, đăng ký và hủy bỏ các sự kiện, hoặc cập nhật giao diện dựa trên trạng thái thay đổi. Dưới đây là một ví dụ minh họa về cách sử dụng useEffect:

jsx

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // Hàm này sẽ được gọi sau mỗi lần render và sau khi component đã mount

    // Tạo một interval để tăng giá trị của seconds sau mỗi giây
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);

    // Trả về một hàm để dọn dẹp sau khi component unmount hoặc trạng thái thay đổi
    return () => {
      clearInterval(interval); // Hủy bỏ interval khi component unmount
    };
  }, [seconds]); // Tham số thứ hai là mảng dependencies

  return (
    <div>
      <p>Seconds: {seconds}</p>
    </div>
  );
}

export default Timer;

Trong ví dụ trên, useEffect được sử dụng để tạo một interval để tăng giá trị seconds sau mỗi giây. Khi component đã mount, useEffect sẽ được gọi và tạo interval. Khi component unmount hoặc giá trị seconds thay đổi, hàm trả về trong useEffect sẽ được gọi để dọn dẹp bằng cách hủy bỏ interval.

Tham số thứ hai của useEffect là một mảng dependencies, nó quyết định khi nào useEffect nên được gọi lại. Nếu mảng này trống ([]), useEffect sẽ chỉ được gọi một lần sau khi component mount. Nếu bạn cung cấp một mảng dependencies, useEffect sẽ được gọi lại khi bất kỳ giá trị trong mảng thay đổi.

useEffect rất hữu ích để quản lý các tác vụ liên quan đến sự kiện, thời gian và dữ liệu trong ứng dụng React của bạn.

Dưới đây là một ví dụ cụ thể về cách sử dụng useEffect trong một ứng dụng React để lấy dữ liệu từ API và hiển thị nó trên giao diện:

jsx

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Lấy dữ liệu từ API khi component đã mount
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []); // Tham số thứ hai trống để useEffect chỉ gọi một lần sau khi mount

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

Trong ví dụ này, useEffect được sử dụng để gọi API để lấy danh sách các bài viết từ JSONPlaceholder. Khi component PostList đã mount, useEffect sẽ được gọi và thực hiện việc gọi API. Dữ liệu từ API sau đó được lưu vào trạng thái posts bằng cách sử dụng hàm setPosts.

Với việc sử dụng useEffect và tham số thứ hai là một mảng trống ([]), API chỉ được gọi một lần sau khi component PostList đã mount. Điều này đảm bảo rằng API không được gọi lại mỗi khi component render lại.

useEffect rất hữu ích trong việc thực hiện các tác vụ bất đồng bộ như gọi API, thực hiện sự kiện và tạo các hiệu ứng tương tác trong ứng dụng React của bạn. Trên đây là giới thiệu về useEffect trong React JS.