I used to teach React at a local coding bootcamp, and I noticed that students kept getting tripped up by the same handful of things. In this article, we're going to go through 9 of the most dastardly gotchas. I'll show you how to solve these common problems, so you can avoid a lot of potential frustration!

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

Explore common beginner mistakes with React and learn how to fix them. Topics include evaluating with zero, mutating state, not generating keys, missing whitespace, accessing state after changing it, returning multiple elements, missing style brackets, and using async functions in effects.

Common Beginner Mistakes with React

Link to this heading Evaluating with zero

Link to this heading Accessing state after changing it

Link to this heading Returning multiple elements

Link to this heading Flipping from uncontrolled to controlled

Link to this heading Missing style brackets

Link to this heading Async effect function

Link to this heading Developing an intuition

This brings back the good old days when I wrote React with JavaScript. I didn’t catch all of these because the last couple of years I have been using Typescript and WebStorm. IDE tools catches these for me now. If I have to go through an interview I will have to done up on these :)

Nice article! I’ve also seen the evaluating by zero in the wild on production apps!

It’s really helpful; I’ll take care of these points while I learn to “React”.

Great article! Thank you for sharing Crypto, I had no idea this existed!
Quick question, with controlled states on input I’ll often have them be laggy due to function running and taking a while. Would using async with useEffect(or useMemo) on those heavy function help the controlled state be more “responsive”?