Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về useEffect, một trong những Hooks cơ bản trong ReactJS. useEffect giúp chúng ta thực hiện các side effect trong function component.

Khái niệm về useEffect

Trước khi đi sâu vào useEffect, hãy cùng tìm hiểu về khái niệm "side effect". Trong lập trình, side effect là bất kỳ thay đổi nào mà hàm hoặc biểu thức gây ra, ngoài việc trả về giá trị. Ví dụ về side effect có thể là việc thay đổi giá trị của biến toàn cục, thực hiện I/O, hoặc thay đổi giá trị của DOM.

useEffect là một Hook cho phép chúng ta thực hiện side effect trong function component. Nó tương tự như componentDidMount, componentDidUpdate, và componentWillUnmount trong class component, nhưng được hợp nhất thành một API duy nhất.

Cách sử dụng useEffect

Dưới đây là cách sử dụng cơ bản của useEffect:

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // Code thực hiện side effect ở đây
  });

  return (
    // Render component ở đây
  );
}

Trong đó, useEffect nhận vào một function, function này sẽ chứa code thực hiện side effect.

Vận hành lifecycle của component với useEffect

useEffect có thể được sử dụng để vận hành lifecycle của component. Dưới đây là cách chúng ta có thể làm điều đó:

componentDidMount

Để thực hiện side effect sau khi component đã được render lần đầu tiên, chúng ta có thể truyền vào useEffect một function và một mảng rỗng:

useEffect(() => {
  // Code thực hiện side effect ở đây
}, []);

componentDidUpdate

Để thực hiện side effect sau mỗi lần render, chúng ta chỉ cần truyền vào useEffect một function:

useEffect(() => {
  // Code thực hiện side effect ở đây
});

componentWillUnmount

Để thực hiện cleanup trước khi component unmount, chúng ta có thể return một function từ function truyền vào useEffect:

useEffect(() => {
  // Code thực hiện side effect ở đây

  return () => {
    // Code thực hiện cleanup ở đây
  };
},[]);

Ví dụ về useEffect

Giả sử chúng ta muốn fetch dữ liệu từ một API khi component được render. Dưới đây là cách chúng ta có thể sử dụng useEffect để thực hiện điều này:

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

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? data.map(item => <div key={item.id}>{item.name}</div>) : 'Loading...'}
    </div>
  );
}

export default App;

Trong ví dụ trên, chúng ta sử dụng useEffect để fetch dữ liệu từ API khi component được render. Mảng dependency của useEffect là một mảng rỗng [], nghĩa là useEffect chỉ chạy một lần sau khi component được render lần đầu tiên.

Hy vọng với bài viết này, các bạn đã hiểu rõ hơn về cách sử dụng useEffect trong React. Hãy tiếp tục thực hành để nắm vững kiến thức này. Chúc các bạn học tốt!