The value passed to the useState hook in the initial render is the initial state value, and gets disregarded in subsequent renders. This initial value can be the result of calling a function as in the following situation: const Component = () => { const [state, setState] = useState(getInitialHundredItems()) } But note that getInitialHundredItems is … Read more
The reason the alert shows the outdated value of count is because the callback passed to setTimeout is referencing an outdated value of count captured by the closure. This is usually referred to as a stale-closure. On the initial render, the anonymous function passed as a callback to setTimeout captures the value of count as … Read more
You can safely use javascript’s array map functionality since that will not modify existing state, which react does not like, and it returns a new array. The process is to loop over the state’s array and find the correct id. Update the done boolean. Then set state with the updated list. const toggleDone = (id) … Read more
You need to use useEffect hook to achieve this. const [counter, setCounter] = useState(0); const doSomething = () => { setCounter(123); } useEffect(() => { console.log(‘Do something after counter has changed’, counter); }, [counter]); If you want the useEffect callback to be ignored during the first initial render, then modify the code accordingly: import React, … Read more