The following code returns 1. It is tricky but should be eye opener.
export default function App() { const [state, setState] = useState(''); useEffect(()=>{ console.log(1) },[setState]) return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }
which is same as
export default function App() { const [state, setState] = useState(''); useEffect(()=>{ console.log(1) },[]) return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }
The following will throw an error
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
export default function App() { const [state, setState] = useState(''); setState(1); useEffect(()=>{ console.log(1) },[]) return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }
We need to set state inside event handler function.
export default function App() { const [state, setState] = useState(0); const onClickHandler=()=>{ setState(1); } useEffect(()=>{ console.log(state) },[state]) return ( <div> <h1>Hello StackBlitz!</h1> <button onClick={onClickHandler}>click</button> </div> );