Hi guys!
In this post we will be learning what the useRef and useState hooks are, their differences and when to use which.
The code examples in th...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
I'd take useState, because I'd get useRef for free by writing:
This way, I can still decide if I want state changes to trigger reconciliation or not.
Not a very good idea, useState has much more logic behind it bc the component is aware of it. Also you can create internal problems during reconciliation phase if you change state outside updater function, so if you want mutable variables without triggering rerender you should use useRef, in any case, stick with react documentation instead of accidentally creating anti-patterns
Actually, both
useRefanduseStateinternally represent memoized values, i.e. values returned by a function that keeps the reference. The only difference is that foruseState, you also get a setter that reactively changes the reference in the memo. If you don't change the reference, the reconciler never notices the change, which is exactly what useRef does: provide a memo with a reference to a value without a setter to ever create a new reference in the memo.Even Dan Abramov himself commented as such on Twitter. In any case, the original question was "which is better" and the answer is:
useStateprovides both functionalities if need be.Obviously, you should always use the right tool for the job, but don't go around accusing someone of creating problems or anti-patterns unless you are really sure of your case.
you are right.
I did cover most of the differences in my post, but then again I am still learning despite a decent amount of experience in React.
In the end, 'which is better' was never addressed and I wrote in the conclusion always use the right tool for the job, as you stated as well
Cheers :)
Yeah, in the context of keeping a reference those are obviously the same, but still holds that you’re carring unnecessary logic with useState call, despite trashing the updater, it is still been created, and yes, i give you that if you never use the updater probably you will not have problems mutating the state, but that’s risky since mutating state both ways will surely bring problems and i have seen this a lot, so this is still a anti-pattern since 1.it’s against React’s documentation, 2. Create unecessary logic and 3. Can quickly lead to problems if you are not carefull, so this is the wrong comment to do in a beginner’s guid post
guys relax !
I just wrote a simple beginner friendly tutorial so obviously i will not be going into that much depth. Both of you are right in your own ways but this argument will lead to nowhere.
Besides I am no React genius, so I am still learning too
Thanks :)
Mostly I use the rule, if state shows up on the UI than useState else useRef. That way you save up on unnecessary renders. Obviously there might be exceptions such as to if you want to trigger other hooks etc
yup that is a very good approach!
They are totally different things. Can't compare.
Hey, everyone.
I have been trying to upload an image on visual code while coding but it keeps on breaking what am I missing?