UseEffect hook in next.js is causing 2 fetch requests when I expect 1, why?

user_11630931 0
Viewed 88

The following code is causing 2 requests to be made to my API with the GET endpoint. I don't understand useEffect() enough to know where to start to debug, but I don't want to cause unneccessary strain on the services that these API endpoints will call server side. This is because they will be calling windows servers to action delete requests in active directory etc...

function Ad() {
    const [data, setData] = useState(null)
    const [isLoading, setLoading] = useState(false)
    useEffect(() => {
        setLoading(true)
        fetch('../api/decom/ad')
            .then(response => response.json())
            .then(data => {
                setData(data)
                setLoading(false)

                if (data.exists == true) {
                    Remove()
                    }
            })
    }, [])

    const Remove = () => {

        fetch("../api/decom/ad", { method: "DELETE" })
            .then(response => response.json())
            .then(data => {
                var inner = ""
                if (data.removed == true) {
                    inner = `<p>Removed: ${greenCircle}</p>`
                } else {
                    inner = `<p>Removed: ${redCircle}</p>`
                }

                document.getElementById('adremoved').innerHTML = inner

            })
    }

    if (data != null  && data.exists == true) return (
        <a className={styles.card}>
            <h2>AD</h2>
            <p>Exists: { greenCircle } </p>
            <div id ="adremoved" className={styles.parent}>
                <p className={styles.child}>removed:</p>
                <div><div className={styles.loader}><div></div><div></div><div></div></div></div>
            </div>
        </a>
    )

    if (data != null && data.exists == false) return (
        <a className={styles.card}>
            <h2>AD</h2>
            <p>Exists: {redCircle} </p>
            <p>Removed:{redCircle}</p>
        </a>
        )

    if (isLoading) return (
        <a className={styles.card}>
            <h2>AD</h2>
            <div className={styles.parent}>
                <p id="adstatus" name="adstatus" className={styles.child}>Exists:</p>
                <div id="adloader"><div className={styles.loader}><div></div><div></div><div></div></div></div>
            </div>
            <p>Removed:{redCircle}</p>
        </a>
        )
}
next.js reactjs fetch-api javascript
2 Answers
const router = useRouter()
const [isLoading, setLoading] = useState(true)
    useEffect(() => {
       if(isLoading && router.isReady){
        fetch('../api/decom/ad')
            .then(response => response.json())
            .then(data => {              
                if (data.exists == true) {
                    Remove()
                    }else{
                setData(data)                
                }
               setLoading(false)
            })
       }
    }, [isLoading])
user_144485930

If you are using react 18, useEffect hook will run twice, that is the expected behaviour

React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

user_103231640
Related