DEV Community

Cover image for 17 Tips from a Senior React Developer

17 Tips from a Senior React Developer

Ndeye Fatou Diop on January 07, 2025

I've been writing React code as an engineer at Palantir for the past 5+ years. These are the 17 tips I wish someone had shared with me when I was ...
Collapse
 
madza profile image
Madza β€’

Solid tips right here, mate! Keep up the awesome job!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks Madza πŸ™Œ

Collapse
 
ianbonaparte profile image
Ian Bonaparte β€’

I agree with almost everything, except I did find that taking the time to learn or study React before diving into making a project helped me, personally. I have been going through Code Academy courses (1-2 hours max usually) before attempting to use a new technology in a project and finding that it helps me at least understand the foundations better, which in turn help me troubleshoot issues in my project better since I actually understand what I'm doing and not just trying to copy + paste from stack overflow ( I still do this, but I understand why I'm doing it :) ).

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Oh πŸ’―.
I myself read some of the react docs and watched some frontendmasters courses to gain confidence.
I think at some point I needed to stop pursuing more courses and just start building and learn along the way!

Collapse
 
ianbonaparte profile image
Ian Bonaparte β€’

Fair! Tutorial hell is real.

Collapse
 
chrischism8063 profile image
chrischism8063 β€’ β€’ Edited

Excellent write-up!!!

I strongly agree with many of the points here, specifically learn JavaScript before React, building projects in general (this builds confidence), leveraging Typescript asap for UI, using ONLY trusted libraries (this is EXTREMELY IMPORTANT as with my company they have a source to pull security reviewed / approved resources), optimize bundle size and lazy loading (I have to work more on this myself), and use React built-in state management (this can get complex and mess up your application if you don't use it correctly).

What I wanted to add here is what frustrates me about the lack of education when persuaing bachelor's degree (in my experience): always add testing in some sort of form to align to new features. Of course this can add additional work and time to a project and future changes.

This validates important business logic which is the whole purpose of adding new features.

Secondly I would mention also understanding how browser tests work with Selenium (or a similar technology).

Of course, I'm a mid-level systems developer, but there is always something new or a better way to do work in the computer science field.

And third, I would say when having Typescript implemented, I've enjoyed using code generators to scan swagger pages to add existing endpoints and types into the project. If there is a better practice for this process, I would like to understand this more.

My experience thus far has been around manually writing this all up instead of generating the code which can reduce turn-around time to deliver new features.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks a lot! I am glad we agree on many different points.

Yes, testing is always good. However, the importance depends on your situation. If you're a startup struggling to stay alive and want to test a product quickly, it may not be a priority. Conversely, if you have code critical to many other apps, it is "criminal" not to test it πŸ˜….

I don't know how browser tests work with Selenium. I only use Cypress to write the tests, but I imagine it would be helpful knowledge.

Yes! My backend also automatically generates typescript types: it is life-changing.

Collapse
 
exocody profile image
ExoCody β€’

Great tips! Really loved the focus on "Make time for refactoring." By the way, we’re kicking off 2025 with the launch of Exocoding for React devs. It’s free and makes generating React/JS code super efficient, a great addition to streamline workflows! 😊

I’d love to hear your thoughts or any feedback you might have!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks a lot! Very cool project idea πŸ˜€

Collapse
 
mike_ritchie_cbe7954fc3de profile image
Mike Ritchie β€’

All great points. If I may add one more: don’t use JavaScript at all if you don’t need to.

HTML and CSS have some great native functionalities that you don’t need to replace with JavaScript. For example, you can make a fully functional accordion group using CSS to style a series of details/summary tags. You can also now make a modal that pops open and closes using the dialog tag, no scripting needed,

It might seem counter-intuitive to say that you shouldn’t use JavaScript when we’re talking about developing a React app, literally made with JavaScript, but every feature that you write using scripting means not only increasing the surface area of your app, but also increasing the code that you have to cover with tests.

Use native HTML whenever you can. That also means using an anchor tag if you have something that acts like a link, and a button tag if you’re making something that acts like a button.

You’ll thank me later!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

100% agree with you. Also JavaScript is more expensive to parse/run for the browser than HTML/CSS in most cases πŸ˜ƒ

Collapse
 
getsetgopi profile image
GP β€’

Awesome! list, and thanks for sharing. I advise the same to my junior developers, that always make sure to master JavaScript even before jumping to other libraries and end up writing code that you don't know how they work.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks a lot!
Super glad we agree πŸ‘

Collapse
 
zia_ulhoquebhuiyan_9988 profile image
zia ul Hoque bhuiyan β€’

nice one.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks πŸ™

Collapse
 
jess_gutirrez_f320d4f35 profile image
JesΓΊs GutiΓ©rrez β€’

Another important tip and a really common mistake among juniors, learn how to use correctly a useEffect. The useEffect hook is no always necessary and is really easy to use it wrong or use it when it is unnecessary

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

100%
You should avoid this hook by default!

Collapse
 
devshefali profile image
Shefali β€’

Helpful article, Ndeye! Thanks for sharingπŸ™Œ

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks Shefali πŸ™Œ

Collapse
 
cn-2k profile image
cn-2k β€’

The first one is absolutelly true, i've started to learn Vue before JS and well... too much scars to say xD

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Ahaha same here! I struggled with react for a long time because I didn’t know JS

Collapse
 
lufc profile image
Luis Felipe CE β€’

Really helpful tips, even for experienced devs, is always good to remember the don'ts

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks!

Collapse
 
brense profile image
Rense Bakker β€’

It's so refreshing to read an article with actual good advice! πŸ‘Œ Strong agree with every single point!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks a lot Rense!

It is my pleasure πŸ™Œ

Collapse
 
nasersss profile image
Naser_Al-Ghaithi β€’

Great tips!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks πŸ™

Collapse
 
idevo profile image
iDevo-AIO β€’

Great πŸ˜ƒπŸ‘

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks πŸ™‚

Collapse
 
marisol88 profile image
Marisol β€’

This is awesome! Couldn’t agree more!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks Marisol πŸ˜€

Collapse
 
jrfrazier profile image
WebDevQuest β€’

10000% I needed these tips about 8 years ago. I hope these tips find someone who is snuggling as I was when I first started.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks a lot! I am super glad to hear I am not alone πŸ˜…

Collapse
 
giseleml profile image
Gisele Leonardi β€’

I'm not sure about number 7. Would you so kindly elaborate on that?

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Hello Gisele,
So I recommend grouping related assets of a component (like in the example here => dev-to-uploads.s3.amazonaws.com/up...)
This is better than having them spread in different folders

Collapse
 
empiree profile image
Oleg Dubovoi β€’

Great article!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks πŸ™

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin β€’

Extra score for mentioning The Pragmatic Programmer and Uncle Bob πŸ™‚ Regarding state management, I'd add to first try Zustand

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks Aleksei! Never used it but I heard good things πŸ˜‰

Collapse
 
roladev profile image
Arol β€’

I love to see a really good list about React. Especially I like the focus on vanilla and basement as first step.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Super glad you like it Arol πŸ™Œ

Collapse
 
ryder007 profile image
Ameet Kumar Pradhan β€’

Great post! loved it. πŸ‘Œ

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks πŸ™

Collapse
 
himanshu_code profile image
Himanshu Sorathiya β€’

Just amazing brother, and also for making book freeπŸ™, and in addition, I found all articles writer by you at that site, when I'm free I'll read and will review πŸ˜€

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks Wizard!
That is my pleasure πŸ˜‡

Collapse
 
alptekin profile image
alptekin I. β€’

I think these are quite good recommendations. Thanks. I try to follow most of them and got into some of the traps you mentioned before.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

I am super glad you like them!
Unfortunately I also did πŸ˜…

Collapse
 
dikesh_maharjan_bb99edda3 profile image
Dikesh Maharjan β€’

Awesome tips.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks!

Collapse
 
austinstan profile image
Stanley β€’

Awesome,,i loved it

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks πŸ™Œ

Collapse
 
matheuseli profile image
Matheus Eli β€’

Great tips!! Thanks!!

Collapse
 
aleemdev profile image
Muhammad Aleem β€’

amazing

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Thanks Muhammad πŸ™Œ

Collapse
 
codewander profile image
Anon β€’

You mention react-router in your simple list. Maybe wouter instead?

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Oh never heard of it before

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin β€’

Highly recommend πŸ™‚

Collapse
 
codewander profile image
Anon β€’
Thread Thread
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

Interesting. Thanks for sharing. It is nice to see alternatives. However react-router is so well-known and tested and nice with the last update that I prefer to just recommend it.

Thread Thread
 
codewander profile image
Anon β€’

Makes sense. I think the common theme in their history is churning through breaking changes for many years now, so even if it's well tested, users are burning time keeping up.

Thread Thread
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop β€’

That is definitely a valid concern πŸ˜€