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
If you are using Next 13 App router this could be happening if you are using an async function Wrong: “use client” export default async function Page() { const [variable, setVariable] = useState(); } Right: “use client” export default function Page() { //Remove Async Keyword const [variable, setVariable] = useState(); }
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
You should add name attributes to input tags. Each name must refer to key in AllValues object. const [allValues, setAllValues] = useState({ mobile: ”, username: ”, email: ”, password: ”, confirmPassword: ” }); const changeHandler = e => { setAllValues({…allValues, [e.target.name]: e.target.value}) } return ( <input type=”text” className=”form-control” id=”mobile” name=”mobile” placeholder=”Enter a valid mobile number” … 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