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 :)
I agree with you, I just think that empathy is also remembering that not everyone has the same knowledge as you, and im all ok with people posting quirks about languages and frameworks, but we should always bring attetion to pitfalls and drawbacks whenever possible, someone that is starting on React might see such a comment and when replicating it, having much more headache than otherwise. Sorry for been agressive, just be kind to other and explain the drawbacks when possible
Yes, mutating state both ways is risky, but since I throw away the updater in my example, that risk is exactly 0.0000.
Also, just because it's not documented, it is not necessarily an anti-pattern. There are a lot of nice patterns nowhere to be found in the react documentation. Yes, creating an unneeded function that will be immediately eaten by the garbage collector may not be the best idea, but the point of the example was to show the relation between both hooks in terms even a beginner should be able to understand and not to show a best practice and 3. No again; if you want to warn about problems, show the code that causes the problem inside the given scope. Don't blame me for bad code you've seen elsewhere.
You have still failed to show why they would have a headache. Also, I would trust even beginners to be able to see that a useRef method is already available, so they wouldn't have to create their own and therefore recognize that this example was meant to illustrate the difference between useState and useRef and not more.
by headache i meant 1) it may be overwhelming to new learners. 2) I am sure I conveyed my point in the post while trying to stay as simple as possible and lastly neither is better, its just about usage
agreed.
Thanks for your inputs and advices, I learnt a few new things too!
However, I think there are no major mistakes on my post right?
I mean in general the differences I mentioned are true and I also researched a few other React articles and the official documentation as well.
Lastly can i delete this thread, because imagine if a newcomer or beginner (my target audience) reads this and gets confused. (Btw I agree with what you said to the person who started the thread, he should not have commented something advanced on a beginner level tutorial)
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!
Hey, everyone.
I have been trying to upload an image on visual code while coding but it keeps on breaking what am I missing?
They are totally different things. Can't compare.