useEffect called multiple times

Question

I have the following reactjs code:

import React, { useState, useEffect } from 'react' const Test = () => { const [counter, setCounter] = useState(0) useEffect(() => { const data = localStorage.getItem('counter') setCounter(parseInt(data, 10)) console.log('init', data) }, []) useEffect(() => { localStorage.setItem('counter', counter) console.log('changed', counter) }, [counter]) const addCounter = () => { setCounter((c) => c + 1) console.log('added', counter) } return ( <div> {counter} <button onClick={addCounter}>+</button> </div> ) } function App() { return ( <div className='App'> <Test /> </div> ) }

The useEffect() hooks are being called multiple times. The states are persisted in localStorage. But upon page refresh, the states reset to default values:

init 4 <--- counter was incremented to 4 at previous session changed 0 <-- counter is reset to 0?? init 0 <-- this should not appear changed 0

What am I doing wrong?

The reason why useEffect() is being called multiple times is probably because you have StrictMode on. Go to your index.js and remove the StrictMode tags. StrictMode renders components multiple times for debugging purposes. — abnathan
– abnathan, Commented Jul 5, 2022 at 18:58
@abnathan bingo! I've removed StrictMode and it's working now. Thanks — masroore
– masroore, Commented Jul 5, 2022 at 18:59

DINK74 · Accepted Answer · 2022-07-05 19:02:21Z

You can use this boilerplate to avoid repeated renders while in <StrictMode>

function App() { const [success, setSuccess] = useState(false); const isMounted = useRef(false); useEffect(() => { console.log('started'); if (isMounted.current) { console.log('mounted'); } else { console.log('mounting'); isMounted.current = true; } }, [success]); const handleClick = (e) => { setSuccess(!success); } return ( <div className="App"> <header className="App-header"> <button className="button" onClick={handleClick}>Action</button> </header> </div> ); }

Collectives™ on Stack Overflow

useEffect called multiple times

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related