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 #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 #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 #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 #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.
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.
Top comments (7)
Really thank you for sharing, my personal opinion about Mistake No. 2, we can use !!items.length &&
That also works. I generally try to avoid because sometimes it can confuse junior devs π
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.?
It really depends here:
Thanks a lot for your reply, I will try that!
Really cool tips
Glad you like them :)