Khám Phá React: Hiểu Về Vòng Đời Component và Sức Mạnh của Hook useEffect

Bạn có bao giờ thắc mắc tại sao React lại trở thành một trong những thư viện JavaScript phổ biến nhất? Hãy cùng tìm hiểu vòng đời của component trong React và khả năng mạnh mẽ của hook useEffect - công cụ chính giúp bạn quản lý các tác dụng phụ trong ứng dụng của mình.

1. Tại Sao React Là Một Thư Viện, Không Phải Là Một Framework?

Khi nhắc đến React, nhiều người thường đặt câu hỏi tại sao nó lại được gọi là thư viện thay vì một framework. Sự khác biệt chính nằm ở chỗ:

• Framework cung cấp mọi công cụ cần thiết để xây dựng ứng dụng, bao gồm cả quản lý trạng thái và định tuyến.
• Thư viện như React tập trung vào giao diện người dùng và cho phép bạn lựa chọn các công cụ bổ sung như Redux, Context API để quản lý trạng thái hay React Router cho việc định tuyến.

2. Những Điểm Nổi Bật Của React

• Component: React sử dụng các component có thể tái sử dụng, giúp việc xây dựng giao diện trở nên nhanh chóng và rõ ràng hơn.
• JSX: Người dùng có thể viết logic và giao diện trên cùng một trang, làm cho mã trở nên dễ đọc và dễ quản lý.
• DOM Ảo: React sử dụng DOM Ảo, giúp cập nhật giao diện một cách hiệu quả mà không cần tải lại toàn bộ trang khi dữ liệu thay đổi.

3. Vòng Đời Của Component Trong React

Các phương thức trong vòng đời component React cho phép bạn kiểm soát các giai đoạn phát triển của một component. Dưới đây là ba phương thức quan trọng:

3.1 componentDidMount

Phương thức này được gọi một lần ngay sau khi component được hiển thị lần đầu tiên trong DOM. Đây là thời điểm lý tưởng để thực hiện các hành động như tìm nạp dữ liệu từ API. Ví dụ:

class UserProfile extends React.Component {
  state = { user: null };

  componentDidMount() {
    fetch('https://api.frontendfirefighter.com/user/1')
      .then((response) => response.json())
      .then((data) => this.setState({ user: data }));
  }

  render() {
    const { user } = this.state;
    return <div>{user ? <h1>{user.name}</h1> : <p>Loading...</p>}</div>;
  }
}

3.2 componentDidUpdate

Phương thức này được gọi mỗi khi component cập nhật, cho phép bạn phản ứng lại những thay đổi trong props hoặc state. Ví dụ:

class UserProfile extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.userId !== prevProps.userId) {
      fetch(`https://api.frontendfirefighter.com/user/${this.props.userId}`)
        .then((response) => response.json())
        .then((data) => console.log('Dữ liệu người dùng mới:', data));
    }
  }

  render() {
    return <h1>User ID: {this.props.userId}</h1>;
  }
}

3.3 componentWillUnmount

Phương thức này được gọi trước khi component bị xóa khỏi DOM, giúp dọn dẹp các tài nguyên nhằm tránh rò rỉ bộ nhớ. Ví dụ:

class Timer extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Timer đang chạy...');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
    console.log('Timer đã dừng!');
  }

  render() {
    return <h1>Timer Đang Chạy</h1>;
  }
}

4. Quản Lý Vòng Đời Component Với Hook useEffect

Khi chuyển sang các functional component, vòng đời của component giờ đây được quản lý thông qua hook useEffect.

4.1 Cách Sử Dụng useEffect

useEffect(() => {
  // hàm callback
}, [mảng phụ thuộc]);

• Không có phần tử phụ thuộc: Hiệu ứng chạy sau mỗi lần render.
• Mảng phụ thuộc rỗng []: Hiệu ứng chỉ chạy một lần khi component được mount, tương tự như componentDidMount.
• Phần tử phụ thuộc cụ thể: Hiệu ứng chỉ chạy khi state hoặc prop đó thay đổi.

4.2 Ví Dụ Sử Dụng useEffect

componentDidMount

useEffect(() => {
  console.log('Tôi đã hiểu rõ hơn về useEffect!');
}, []);

componentDidUpdate

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    console.log(`Tôi đã đọc bài viết này ${count} lần`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Đọc Lại</button>
    </div>
  );
}

componentWillUnmount

useEffect(() => {
  document.addEventListener('mousedown', handleClickOutside);

  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, []);

Kết Luận

Trong React, việc hiểu vòng đời của component và cách sử dụng hook useEffect là cực kỳ quan trọng để xây dựng các ứng dụng hiệu quả và tránh các lỗi phổ biến. Việc dọn dẹp các nguồn tài nguyên không cần thiết giúp bạn cải thiện hiệu suất và đảm bảo trải nghiệm tốt nhất cho người dùng. Chúc các bạn lập trình vui vẻ và thành công với React!
source: viblo