Elevate your coding game with our FREE JavaScript Reference Guide! Dive in and upgrade your skills today! Download Now 💪🚀
Here’s 5 tips to write react code that looks cleaner and performs better.
Avoid passing functions as inline props
Every re-render of the parent will result in a new reference for the function passed to the child.
Use FlatList over .map
FlatList are optimized components used to display large amounts of data. Try to use them instead of .map in most cases. Unless the data is really small, the performance will suffer if you use .map over FlatList.
Avoid passing objects as inline props
Passing objects directly in props results in the creation of a new instance of the object on every re-render instead of using the same reference.
Use Tailwind over style sheets
A new render creates a new instance of the inline styling object but styles created via StyleSheet are passed as a reference. Tailwind also allows us to keep our style concise and in best practices
Avoid rendering conditionally
Using conditionals or ternaries to make a component disappear (i.e. to unmount it) is not good practice. It takes a lot of resources to unmount and mount components, so we want to avoid conditional rendering as much as possible.
Closing thoughts
How do you write better code? What are your best practices and how do make sure to abide by them in your code?
👋 Hey, thanks for sticking around till the end!
If you’re vibing with what you’ve read and wanna keep the good times rolling, I’ve got just the spot for you. This is just a taste of what you can find over at Digital Art Dealers.
We’re talking coding tips, startup stories, AI insights, and much more. It’s like your favorite late-night rabbit hole, but better. 🎉
But hey, don’t just take my word for it. Click here and see for yourself! Who knows, you might just find your next obsession waiting for you. 💻🚀
See you on the other side! 🤘
