为什么当 function 组件中的 state 发生变化时，它会以 2 的倍数运行？

Question

I have some question in react. It's not a big problem, but I don't understand.

I make a components where new data is continuously added to data. It makes sense that two console logs appear at first. Because of Mount and Update. But next cycle, here is my question.Why do 4 console logs appear? and then 8.. and then 16.. and then 32.......

here is the code.

import React, { useState } from 'react'

const Ex = () => {
    const [state, setstate] = useState({ test: 'data' })
    const handleDate = () => {
        const { test } = state
        const data = 'new data'
        setstate({ test: test + data })
        console.log(`test: ${test}`);
    }
    setTimeout(handleDate, 3000);
    return (
        <div>
            <span>Result: {state.test}</span>
        </div>
    )
}

export default Ex

Answer 1

It would seem that every time state changes, your component is rendered twice, for whatever reason best known to React. Now each time it renders, it calls setTimeout to trigger a state change in 3 seconds. Each of those changes triggers two more renders, which in turn generate two more setTimeouts, each of which will cause the component to render twice again, and so on and so forth.

Rather than having a setTimeout inside the render, you should use the useEffect hook to achieve the result you want, namely a self-updating component. See this answer: React hooks - right way to clear timeouts and intervals