One of my favorite things about web development is that there's always something new to learn. You could spend your whole life mastering various pr...
For further actions, you may consider blocking this person and/or reporting abuse
I'm completely new to React so thank you for the explanations! And how to do things properly. But I have a question if you would be so kind to reply: #2 tells us to use functions, but #3 uses an object
{ name: 'Matt' }. So is it just for example or it's ok to sometimes use objects instead of functions?Good question! I should clarify my article to help explain that better.
You should use a function of the previous state when you are updating the state that relies on the previous state. So like in the two examples I gave, enabling/disabling a button relies on the previous state of whether or not is was disabled. And incrementing a counter relies on the previous value of the counter.
If you aren't relying on the previous state but are just setting an entirely new value, then using an object as an argument is perfectly fine. For example, if you were fetching a list of users from the server and then needed to store that list of users in the component's state, it would be perfectly fine to do something like:
Because in that case it doesn't matter what the previous value of
userswas before. You just want to store the new data you just fetched.Does that help?
As an update, I updated the article just now to hopefully be more clear.
I changed the header text to:
And I added this paragraph at the end of the section:
Yes, I think I get it now. Thank you one more time! 😄
Sure thing!
use functions when you rely on previous state values, like toggle button, increment counter, etc. It's okay to use objects when the new state is independent of previous (like in #3). Correct me I'm wrong.
Yep! That's exactly right.
#3 is so accurate. I made this mistake countless times as a Junior. Even now with React hooks I'll catch myself trying to do something synchronously and go "oh right, can't do it like that" and end up hooking it up through an effect.
Edit: Add escape characters.
Good post! I hope TypeScript flavoured react would provide decorators or generics to prevent misuing the state in the first place. E.g. setting the properties read-only and make forcing the use of prevState more obvious. In this way Angular is a little bit better, as it has more structure around this that makes harder to make human mistakes.
"The key here is that if your new state relies on the value of the old state, you should always use a function as the argument."
I knew this already but your example really helped clarify it. Thank you for sharing! As a React newbie this kind of post is super useful to me to solidify what I'm learning.
You’re welcome! I’m glad I could help. Keep on learning and being awesome!
Good write up!
Please do not assume only junior developers make these kinds of mistakes :).
Haha very true! Even those with more experience have made these mistakes. Maybe what I meant is "people new to React" often make these mistakes.
3 - This mistake is the most frustrating one until you find out the reason. React made me think async in everyday life too😅
I've been working with React for nearly two years now and this helped me so much! I've never broken through on when to use prevState with setState your example really helped click. Now I've got some button states to go fix :)
Glad I could help!
Thank you for the good examples and explanation on how to avoid such mistakes!
Any time!
I've made a terrible mistake.
Winner winner!
very helpful, thanks!
I'm currently learning in Udemy's React Course by Stephen Grider and this post is really helpful for me. Thank you!
Thank you
Mistake Junior React Devs make is using component classes instead of hooks and useState
Just for you, I wrote a similar article now, but this time with function components and the
useStatehook. ;)dev.to/thawkin3/3-mistakes-junior-...
Ehh... sort of. Hooks are cool and solve a lot of problems and frustrations people have had with class components, but class components are here to stay, at least for now. It's very likely that any developer working on a codebase that existed before hooks were released will be dealing with class components, so it's still important to understand how state works with class components.
Helpful :)
Thanks you so much
Thank you so much, i was struggling with the last problem. I did not know that setState is asynchronous
You’re welcome! That one trips up a lot of people.
Later two were good information. Although I knew, but thanks for reminding me
Ah yes I did that when I started too
Thank you Tyler for this very helpful article. #3 had me questioning my programming knowledge at some point before I understood that setState is asynchronous