next.js 中的 UseEffect 钩子导致了 2 个获取请求，而我预期是 1 个，为什么？

Question

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>
        )
}

Answer 1

const [isLoading, setLoading] = useState(true)
    useEffect(() => {
       if(isLoading){
        fetch('../api/decom/ad')
            .then(response => response.json())
            .then(data => {              
                if (data.exists == true) {
                    Remove()
                    }else{
                setData(data)                
                }
               setLoading(false)
            })
       }
    }, [isLoading])

Answer 2

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