Hướng Dẫn Triển Khai useEffect Trong React

Công Nghệ

useEffect là một hook quan trọng trong React, cho phép bạn thực hiện các hiệu ứng phụ (side effects) trong các component. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng useEffect và một số ví dụ cụ thể để làm rõ hơn cách triển khai hook này trong các ứng dụng React.

1. Giới Thiệu Về `useEffect`

useEffect là một hook được giới thiệu trong React 16.8, cho phép bạn thực hiện các hành động như fetching dữ liệu, đăng ký các sự kiện, hoặc làm sạch các tài nguyên khi component được mount hoặc unmount. Nó hoạt động tương tự như lifecycle methods componentDidMount, componentDidUpdate, và componentWillUnmount trong class components, nhưng với cú pháp đơn giản hơn.

Cú Pháp Cơ Bản

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

function ExampleComponent() {
  useEffect(() => {
    // Code sẽ chạy khi component được mount hoặc khi dependencies thay đổi
    console.log('Component mounted or updated');
    
    return () => {
      // Code để dọn dẹp (cleanup) khi component unmount hoặc trước khi effect chạy lại
      console.log('Cleanup');
    };
  }, [/* dependencies */]);

  return <div>Example Component</div>;
}

2. Các Tình Huống Sử Dụng `useEffect`

2.1 Fetch Dữ Liệu Khi Component Mount

Một trong những ứng dụng phổ biến của useEffect là fetching dữ liệu từ API khi component được mount.

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []); // Empty dependency array means this effect runs only once (on mount)

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Data: {JSON.stringify(data)}</div>;
}

2.2 Thay Đổi Title Của Trang

Bạn có thể sử dụng useEffect để cập nhật tiêu đề của trang khi dữ liệu hoặc trạng thái thay đổi.

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

function TitleUpdater() {
  const [title, setTitle] = useState('Default Title');

  useEffect(() => {
    document.title = title;

    // Cleanup function to reset the title when component unmounts
    return () => {
      document.title = 'Default Title';
    };
  }, [title]); // Effect runs only when 'title' changes

  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
    </div>
  );
}

2.3 Đăng Ký và Hủy Đăng Ký Các Sự Kiện

Sử dụng useEffect để đăng ký các sự kiện và dọn dẹp chúng khi component unmount.

import React, { useEffect } from 'react';

function EventListenerComponent() {
  useEffect(() => {
    const handleScroll = () => {
      console.log('Page is scrolling');
    };

    window.addEventListener('scroll', handleScroll);

    // Cleanup function
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // Empty dependency array means this effect runs only once (on mount)

  return <div>Scroll the page to see the effect in action</div>;
}

3. Các Quy Tắc Của `useEffect`

3.1 Quy Tắc Sử Dụng

Chỉ Định Nghĩa useEffect Trong Hàm Component: Hook này chỉ nên được gọi trong thân hàm của component hoặc custom hook.

Không Gọi Hook Trong Vòng Lặp, Điều Kiện, Hoặc Hàm Nested: Đảm bảo rằng hook luôn được gọi cùng một cách mỗi lần render.

3.2 Dependency Array

Mảng Rỗng ([]): useEffect chỉ chạy khi component mount lần đầu tiên và dọn dẹp khi unmount.

Mảng Có Dependencies: useEffect chạy lại mỗi khi một trong các dependencies thay đổi.

Không Cung Cấp Mảng Dependencies: useEffect sẽ chạy sau mỗi lần render.

4. Tổng Kết

useEffect là một hook mạnh mẽ giúp bạn quản lý các hiệu ứng phụ trong các component của bạn. Bằng cách hiểu rõ các tình huống sử dụng và các quy tắc của useEffect, bạn có thể triển khai các chức năng như fetching dữ liệu, cập nhật tiêu đề trang, và quản lý các sự kiện một cách dễ dàng và hiệu quả.

Kết nối với web designer Lê Thành Nam

Chia Sẻ Bài Viết