DEV Community

Cover image for 5 Small (Yet Easily Fixable) Mistakes Junior Frontend Developers Often Make in Their React Code
Ndeye Fatou Diop
Ndeye Fatou Diop

Posted on โ€ข Edited on โ€ข Originally published at frontendjoy.com

14 2 1 1 1

5 Small (Yet Easily Fixable) Mistakes Junior Frontend Developers Often Make in Their React Code

I have reviewed more than 1,000 frontend pull requests.

Like many junior developers, I made some common mistakes when I started.

If you're in the same boat, here are 5 small mistakes you can quickly fix to keep your code clean and performant:

Mistake #1: Creating a state that can be derived from props + existing state
If you can calculate a value from existing props, please do so. Creating a state for it adds complexity and raises the risk of state discrepancies (some updated, others not).

Mistake 1

Mistake #2: Using items.length && <MyComponent />
Let's say you only want to render a component when a list is non-empty. So you use items.length && <MyComponent />. The problem is that this code will print 0 on the screen when the list is empty. Instead, use items.length > 0 && <MyComponent />.

Mistake 2

Mistake #3: Using useEffect unnecessarily or dangerously
Be cautious with the dependencies list in useEffect; if poorly set, it might crash your app or lead to inconsistent UI. Additionally, try to minimize its use for better performance and code readability.

Mistake 3

Mistake #4: Having multiple setState vs. combining into a single state or using reducer
If you have multiple pieces of state that are strongly correlated, avoid multiple setState. Instead, opt for a single setState or use useReducer to maintain cleaner code.

Mistake 4

Mistake #5: Accidentally breaking the component memoization
A common mistake, especially for beginners, is breaking the memoization created by React.memo. Make sure you don't accidentally pass objects or arrow functions, as it renders memoization ineffective.

Mistake 5


Thank you for reading this post ๐Ÿ™.

Leave a comment ๐Ÿ“ฉ to share a mistake that you made as a junior developer.

And Don't forget to Drop a "๐Ÿ’–๐Ÿฆ„๐Ÿ”ฅ".

If you're learning React, download my 101 React Tips & Tricks book for FREE.

If you like articles like this, join my FREE newsletter, FrontendJoy.

If you want daily tips, find me on X/Twitter.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadogโ€™s testing tunnel.

Download The Guide

Top comments (7)

Collapse
 
zukatahara profile image
zukatahara โ€ข

Really thank you for sharing, my personal opinion about Mistake No. 2, we can use !!items.length &&

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop โ€ข

That also works. I generally try to avoid because sometimes it can confuse junior devs ๐Ÿ˜…

Collapse
 
christophcodes profile image
Christoph โ€ข

Thanks a lot for this article. A lot of new ideas and things I need to look into. ๐Ÿ‘๐Ÿป

Mistake 4 seems to be a good example for managing the state of a bunch of user information.

What would be your way of updating the typed in user information in the backend?

After each change of input, or after onBlur of the whole form, etc.?

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop โ€ข

It really depends here:

  • I generally try to avoid doing so and instead I call the server only when I am ready to save the data (for example onSubmit)
  • If I have to update the server, I generally do it onBlur but I also denounce the calls made to the server : see the useDebounce hook here => usehooks.com/usedebounce
Collapse
 
christophcodes profile image
Christoph โ€ข

Thanks a lot for your reply, I will try that!

Collapse
 
cherryramatis profile image
Cherry Ramatis โ€ข

Really cool tips

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop โ€ข

Glad you like them :)

nextjs tutorial video

Youtube Tutorial Series ๐Ÿ“บ

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series ๐Ÿ‘€

Watch the Youtube series