🥹useEffect như componentDidMount, componentDidUpdate, componentUnWillMount

https://freetuts.net/useeffect-trong-react-hooks-2578.html

Chúng ta có thể bắt sự kiện componentDidMount trong một functional component bằng cách sử dụng useEffect và chỉ định arrayDependencies là một mảng rỗng:

//Gọi React và useState
import React, { useState, useEffect } from "react";
import axios from "axios"; //Sử dụng axios

//Component hiển thị danh sách người dùng
const ShowUser = (props) => {
  //Lấy giá tri của props listUser
  const { listUser } = props;

  // Render ra list user
  // React.Fragment cho phép bọc JSX lại.
  // List Keys :  chỉ định key, giúp loại bỏ cảnh báo.
  return (
    <div>
      {listUser.map((user, index) => {
        return (
          <React.Fragment key={user.id}>
            <ul>
              <li>{user.name}</li>
              <li>{user.email}</li>
            </ul>
            <hr />
          </React.Fragment>
        );
      })}
    </div>
  );
};

export default function App(props) {
  //Khai báo state, sử dụng hook: useState
  const [listUser, setListUser] = useState([]);

  //Sử dụng useEffect hook như componentDidMount
  useEffect(() => {
    const getUserAPI = 'https://5df8a4c6e9f79e0014b6a587.mockapi.io/freetuts/users'

    //Gọi API bằng axios
    axios.get(getUserAPI).then((res) => {
      // Cập nhật lại listUser bằng
      // Bạn có thể xem lại bài viết về useState()
      setListUser(res.data);
    }).catch((err) => {
      //Trường hợp xảy ra lỗi
      console.log(err);
      alert("Xảy ra lỗi");
    })

  }, [])

  return (
    <>
      <code>freetuts.net</code> <br />

      <ShowUser listUser={listUser} />
    </>
  );
}

Để sử dụng componentDidUpdate trong functional component chúng ta sẽ chỉ định giả trị của tham số arrayDependencies là null.

src\App.jsx

import React, { useState, useEffect } from 'react';
import axios from "axios";
const ShowUser = (props) => {
  const { listUser } = props;
  return (
    <div>
      {
        listUser.map((user, index) => {
          return (
            <React.Fragment key={user.id}>
              <ul>
                <li>{user.name}</li>
                <li>{user.email}</li>
              </ul>
            </React.Fragment>
          )
        })
      }
    </div>
  )
}
function App() {
  const [listUser, setListUser] = useState([]);
  useEffect(() => {
    const getUserAPI = 'https://5df8a4c6e9f79e0014b6a587.mockapi.io/freetuts/users';
    axios.get(getUserAPI).then((res) => {
      setListUser(res.data);
    }).catch((err) => {
      console.log(err);
      alert("Xảy ra lỗi");
    })
  });
  return (
    <div className="row">
      <div className="col-12">
        <ShowUser listUser={listUser} />
      </div>
    </div>
  )
}
export default App;

Lifecycle thứ 3 mà chúng ta có thể sử dụng được với useEffect là componentUnWillMount, lifecycle này được khởi chạy khi mỗi khi component chuẩn bị được xóa khỏi tree dom. Để sử dụng nó bằng useEffect chúng ta chỉ cần return về 1 function trong effectFunction, function được return đó sẽ đóng vai trò như là componentUnWillMount. Cùng xem xét ví dụ bên duới:

src\App.jsx

import React, { useState, useEffect } from 'react';
import axios from "axios";
function LifecycleDemo() {
  useEffect(() => {
    //Được gọi khi component render
    console.log('render!');
    // useEffect trả về một hàm ,
    // hàm trả về đó là đóng vai trò như
    // là componentWillUnmount
    return () => console.log('unmounting...');
  })
  return (<code>freetuts.net</code>);
}
function App() {
  const [mounted, setMounted] = useState(true);
  const toggle = () => setMounted(!mounted);
  return (
    <>
      {mounted && <LifecycleDemo />} <hr />
      <button onClick={toggle}>Show/Hide LifecycleDemo</button>
    </>
  )
}
export default App;