React Hooks Closure Problems 

This is the way that should be used with functional components! Don't use useRef in this case.

link?

overreacted.io/a-complete-guide-to-useeffect/

@@bawad You can find a similar solution to yours in another Abramov post: overreacted.io/making-setinterval-declarative-with-react-hooks/#refs-to-the-rescue To note the way he uses a custom hook and how he talks about the different 'state paradigms' of setInterval and React

yeah and then you put a name on your input

@@bawad how so? Only way I came up with was using a reducer but compared to the handleChange method that I normally use with classes it's too cumbersome

yes

how are you triggering the action?

@@bawad I had figured it out using browser debugger but still I am not able to understand the problem. It is because I had written reducer inside function. I just removed it from inside the function and declared it as const and it solves the problem. can you explain this please.

@@hardikmodi8234 Can you please show the sample code line ? Even I ran across the problem same as yours.

I think you might run into different issues, give it a try though

UseCallback wouldn't work. This was my first intuition as well, but turns out the only way to get the latest value is to save them as a reference.

@@bawad No Loco Dev is right. Your solution can be solved by casier means.

The variables within the App() function get recreated every time the function is called. With countRef = useRef(0), the countRef variable will still be recreated with every call, but it will always refer to the same object which React maintains in the background for you :) It is merely a "reference" to an object that lives beyond each App() function run.

This would solve nothing. If you keep the object reference the same and only update the value, then no update will ever trigger re-rendering, contradicting the core use of the useState hook. If all you need is a stable reference just take the useRef hook. If you need both use both.

You have to understood how javascript handles copy by value, and point by reference. Count as State is making a "copy" of count's value at that time. Count as Ref is a "reference", so it is pointing to the same count variable. And whatever it may be later on, it still points to it in memory.

Well it is but people didn't deal with this as much when working with class component so I a sense it is a hooks problem

@@calebclawrence It is not a "problem" with Javascript, nor with Hooks. It is just the way React and its Hooks work, the useState hook is not meant to establish a closure.

@@gwapster13 Learnt it the hard way. Wasted 2 days on this but at least I won't be making this error anytime soon.

yes I think its somehow a Javascript problem, and we can solve it with that way: const referCount = {count: 0}; function App() { const [count, setCount] = useState(0); useEffect(() => { referCount.count = count; }, [count]); function handleAlertClick() { setTimeout(() => { alert("You clicked on: " + referCount.count); }, 3000); } return ( You clicked {count} times setCount(count + 1)}>Click me Show alert ); } but this is a not so clean way to solve it, this video has a better solution for React components