Tại sao API trong useEffect lại được gọi 2 lần trong ReactJS

Tại sao useEffect lại được gọi 2 lần trong ReactJS Đây là câu hỏi tôi đã tìm kiếm một thời gian không thấy thông tin hôm nay tình cờ đọc được thông tin nên tôi chia sẻ cho ace nào cũng tìm kiếm giống tôi 1. Trường hợp sử dụng Chúng ta nếu đã quen

Tại sao useEffect lại được gọi 2 lần trong ReactJS

Đây là câu hỏi tôi đã tìm kiếm một thời gian không thấy thông tin hôm nay tình cờ đọc được thông tin nên tôi chia sẻ cho ace nào cũng tìm kiếm giống tôi

1. Trường hợp sử dụng

  • Chúng ta nếu đã quen thuộc với ReactJS thì gọi API trong useEffect như sau:
useEffect(()=>{
  api.post("/view",{})
},[])
  • Nhưng khi kiểm tra trong trong network thì bạn sẽ thấy API này được gọi 2 lần. Vậy nguyên nhân ở đâu?

2. Giải thích

  • Nguyên nhân chính xác là do Strict mode trong Development mode còn khi đã build bạn sẽ không gặp phải lỗi này nữa.
  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

3. Lý do

  • Trong DEV mode thì đây chỉ là quá trình giúp bạn kiểm tra các lỗi có thể phát sinh trong quá trình gọi API kịp thời đưa ra các cảnh báo nếu có thể.
  • Khi ở product mode bạn sẽ ko gặp phải vấn đề này nữa🤚👋

4. Cách khắc phục

  • Tắt StrictMode

  • Sử dụng hook useRef custom lại useEffect như sau. Bạn sẽ có 1 hook usEffectOnce trong DEV mode.
export default function useEffectOnce(fn: () => void) {
  const ref = useRef(false);
  useEffect(() => {
    if (ref.current) {
      fn();
    }
    return () => {
      ref.current = true;
    };
  }, [fn]);
}

5. Phương án khác khi gọi API

  • Như các bạn đã biết, useEffect sẽ được chạy khi toàn bộ trang hoặc commponent được render hoàn toàn. Vì vậy khi chúng ta đặt API bên trong nó, API sẽ phải chờ 1 khoảng thời gian trước khi được chạy. Điều này không tối ưu.
    Phương án: bạn có thể sử dụng useQuery hook để chạy song song 2 phần này.
    Ví dụ:
const { status, data, error, isFetching } = useQuery(
  ['data'],
  async () => {
    const data = await (
      await fetch(`${API_BASE_URL}/data`)
    ).json()
    return data
  }
)

Nguồn: viblo.asia

Bài viết liên quan

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 2

viết lại nội dung này ” Phát hiện các cuộc tấn công Cross Site Scripting (XSS)

AI Chatbot 2025: Xu Hướng Tất Yếu Cho Doanh Nghiệp Dẫn Đầu

Giới thiệu AI chatbots đã trải qua một hành trình đáng kể, từ những công cụ t

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 1

Tấn công web là gì? Ứng dụng web là các ứng dụng cung cấp dịch vụ cho người

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp Trong kỷ nguyên s