Create a example simple with useEffect in React

Day 34/100 #100DaysOfCode #React

Tìm hiểu sử dụng useEffect trong React, useEffect nó là lifecycle bao gồm các tính năng như: componentDidUpdate, componentWillUnmount, componentDidMount

Nay mình mò thử thử cách sử dụng nó như thế nào nhé, mặt định useEffect nó có cấu trúc như sau:

useEffect(()=>{

    /*
      ta gọi componentDidMount trong chổ này
    */

    return () => {
      /*
        ta xử lý componentWillUnmount ở đây
      */
      
    }

  /*
    trong đấu [] là một mãng, ta có xử lý componentDidUpdate
  */
},[]);

VD: 

let loading = false;
let didMount = true;
useEffect(()=>{
    //call componentDidMount
    const callAPI = async()=>{
        loading = true
        if(didMount){
            
            //request api
            let data = await fetch(...)

            //after set data
            setData(await data.json())

            //update loading
            setLoading(false)
        }
    }
    callAPI();
    
    return()=>{
        //componentWillUnmount
        didMount = false;
    }

    //nếu id thay đổi thì useEffect nó gọi lại , componentDidUpdate
},[id]);

Đầu tiên tạo project xong các bạn thử đoạn mã sau chạy thử xem sao nghe

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

const FetchAPI = () => {
  //category
  const [cate,setCate] = useState("");

  //check loading fetch api
  const [loading, setLoading] = useState(false);

  //create state save data product
  const [products, setProducts] = useState([]);

  //Create category
  const [categories,setCategories]=useState([]);


  let componentMount = true;
  
  //using useEffect call API
  useEffect(() => {

    const fetchData = async () => {
      setLoading(true);
      let URL = `https://fakestoreapi.com/products`;
      if(cate!=""){
        URL = `https://fakestoreapi.com/products/category/${cate}`;
        console.log(URL)
      }
      const data = await fetch(URL);
      const _categories = await fetch(`https://fakestoreapi.com/products/categories`);
      if (componentMount) {
        // convert data to json
        console.log(data.clone().json())
        setProducts(await data.clone().json());
        setCategories(await _categories.clone().json())
        setLoading(false)
      }

    }

    // call the function
    fetchData().catch(console.error);

    return () => {
      //remove all memory
      componentMount = false;
    }
  }, [cate])

  return (
    <>
      {
        loading ?

          <h1>Loading...!</h1> :

          <>
            <h2>Choose category:</h2>
            <select onChange={(e)=>setCate(e.target.value)}>
              <option value="choose">Choose category</option>
              {
                categories.map(item=>{   
                    return <option value={item}>{item}</option>
                })
              }
            </select>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
              {
                products.length>0 && products.map(({ id, title, price, image }) => {
                  return (
                    <>
                      <div className="item" style={{ width: 200, padding: 20 }} key={id}>
                        <img src={image} style={{ width: 150, height: 150, display: 'block' }} />
                        <span>{title}</span>
                        <mark>{price}</mark>
                      </div>
                    </>
                  )
                })
              }
            </div>
          </>

      }

    </>
  )
}

export default FetchAPI

+ Loading:  tạo state loading để kiểm tra fetch

+ products : dùng lưu trữ data, khi có data rồi, ta có thể dùng map để lặp dữ liệu ra

+ Sử dụng onChange trong select, để thay đổi category, để useEffect gọi lại API

Demo: