Cách cải thiện về loading trong Reactjs?

Question

Chào các bạn, mình đang tập tành làm reactjs thì mình có đang làm phần loading khi click vào các button hoặc có action async nào đấy. Phần này thì ở mỗi component cần hiển thị icon loading thì mình...

Answer

Cách đơn giản nhất để áp dụng loading như bạn muốn thì bạn chỉ cần tạo thêm một biến boolean chứa trạng thái loading mà thôi. Khi nào bạn thực hiện các async action thì bạn set biến này về true, ngược lại khi xong thì trả vê false:

const App = () => {
  const [isLoading, setIsLoading] = useState(false)
  
  async function handleLoadData() {
    try {
      setIsLoading(true);
      
      // Main logic
    } catch (error) {
      // Handle error
    } finally {
      setIsLoading(false);
    }
  }

  return (
    isLoading
    ? <SpinIcon />
    : <ListItem />
  )
}

Còn nếu trường hợp bạn muốn làm chi tiết hơn và đem đến UI tốt nhất cho từng trạng thái thì bạn nên áp dụng theo kiểu status như bên dưới.

const LOADING = 'LOADING';
const SUCCESS = 'SUCCESS';
const ERROR = 'ERROR';

const App = () => {
  const [status, setStatus] = useState(SUCCESS)
  
  async function handleLoadData() {
    try {
      setStatus(LOADING );
      // Main logic
      setStatus(SUCCESS);
    } catch (error) {
      setStatus(ERROR)
      // Handle error
    }
  }

  function renderData() {
    switch (status) {
      case LOADING:
        return <LoadingUI />
      case SUCCESS :
        return <ListItem />
      default:
        return <ErrorUI />
    }
  }

  return (
      {renderData()}
  )
}

Answer

Vì việc load data đều xuất phát từ call api nên có thể dùng hooks để tóm gọn code call api gắn với trạng thái loading của lần call api đó

// hooks/useGetData.tsx
import { useEffect, useState } from 'react';
...

const useGetData = (
  endpoint,
  params?,
  successCallback?: () => void,
  failCallback?: () => void,
) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [data, setData] = useState<unknown>();

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
        try {
          const response = await axios.get(endpoint, params) // function call api ở đây
          setData(response.data)
          if (successCallback) successCallback(response.data);
        } catch(e) {
          // throw
          if (failCallback) failCallback();
        } .finally{
          setLoading(false);
        }
     }
    fetchData();
  }, [endpoint, params, successCallback, failCallback])
 
  return {
    data,
    loading
  };
}

export default useGetData;

ở trong component nào đó nếu gọi api thì

import useGetData from '@/hooks/useGetData';
...
// trong functional component nào đó
...
const { loading, data } = useGetData('https://api.pornhub.com');

return (<>
{loading ? <LoadingIcon /> : <ListItem items={data}/>}
</>)

có thể tối ưu hơn nữa nhưng đại khái ý tưởng là như vậy :v

với việc chia ra như vầy không chỉ đơn giản việc check loading mà còn có display response/ catch error theo ý muốn. Kiểu như làm 1 cái alert component cho toàn app, fetch data lỗi thì tự hiển thị message mà api trả về... kiểu vậy

P/s: mình viết mã giả thôi nên lỗi cú pháp or import tự fix nhé :v đối số hàm cũng tuỳ chỉnh theo nhu cầu của b

2 CÂU TRẢ LỜI