I have a situation today, My Ionic App using Typescript with React was calling my API twice and creating multiple and duplicate records in my database. This could not work for me. I found a solution on how to run useEffect only once. This is what I had in my ogirinal code:

Problem

 useEffect(() => {
    console.log(`LINE 145`);
 }, []);

When I looked in my console, there were two LINE 145

Solution

import React, {useRef } from "react";

 

const fetchDataRef = useRef(false);

 

  const showConsole = () => {
    console.log(`LINE 145`);
}

 

  useEffect(() => {
    if (fetchDataRef.current) return;
    fetchDataRef.current = true;
    showConsole();
 }, []);