React rerender process seem to act unnormal

Question

function App() {
  return <Store></Store>;
}

export function Store() {
    console.log("render Store");
    useState(()=>{
        console.log("useState")
    })
    useEffect(()=>{
        console.log("mount");
        return ()=>{ console.log("unmount");};
    },[])
    return <div>??</div>
}

The console will logrender Store=>useState=>render Store=>useState=>mount. Lazy load of useState run 2 time,Store rerender without any reason. enter image description here

It's very confused.

I find the same question https://stackoverflow.com/questions/54927622/usestate-do-double-render ,the devto — BeanBro, Mar 29 '20 at 09:54

score 0 · Answer 1 · answered Mar 29 '20 at 08:51

0

Try to wrap your component in StrictMode

<React.StrictMode>
    <Store/>
</React.StrictMode>

answered Mar 29 '20 at 08:51

Max Starling

967
8
8

score 0 · Answer 2 · answered Mar 29 '20 at 08:51

React hooks run on each render cycle. State was initialized to `undefined and triggered second render (render phase), then component was mounted (commit phase).

Granted this diagram uses the class-based component's lifecycle functions, but the process is the same for functional components.

React rerender process seem to act unnormal

2 Answers2