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 like articles like this, join my FREE newsletter, FrontendJoy, or find me on X/Twitter.