💻 7 Tips for Writing Clean and Efficient React Code

Hey! Welcome back to my daily article! Today I will talk about some tips for writing clean React code.

Obviously, as always, people will have their own opinions, and you might not like these. Heck, I might even change my opinion in a few months! Who knows. These tips are helpful today, and I wanted to share them with you.

💡 Tip 1: Use functional components instead of class components

As I said in another article, functional components are the current standard in React, so almost everyone uses them. But in case you are following some old tutorial, or you were wondering which one to use... use functional components.

They are a more straightforward and concise way to define components!

Also, they are faster and easier to understand, especially for a junior developer.

Here you have a basic React component coded as a class component:

And here, you have the same component but as a functional component:

💡 Tip 2: Use the useState hook for state management

Well, this one is stupid if you are already using functional components, but just in case, yeah, use the useState hook for your state.

Here is an example:

In this example, I am using the useState hook to store the current count (the count var), and I also got a function (setCount) to update the count.

So this allows me to manage the state in my components without needing class components or complex state management libraries.

In case you want to read more about it, check this doc!

💡 Tip 3: Use the useEffect hook for side effects

Another pretty obvious if you are already using functional components, but... always good to remember.

This hook is a powerful tool for handling side effects in React components. Basically, it allows you to perform actions after a component has been updated, such as making API calls or updating the DOM.

As always, here you have an example using the hook:

In the previous code, I used the useEffect hook to fetch data from an API when the component is mounted. The hook's second argument is an array of dependencies that determines when the effect should be rerun.

In this case, an empty array means the effect will run only once when the component is mounted.

💡 Tip 4: Use destructuring to simplify code

One of the most powerful features in the latest Javascript versions, this is not only a React feature; you can use it everywhere in Javascript. And you should!

It allows you to extract values from objects and arrays. For example, you can use it in React to simplify your code and make it easier to read.

Of course, I will share an example of restructuring in a functional component:

In this example, the message prop is destructured from the props object, making it available as a separate variable.

As you can see, this allows you to simplify the code (you don't need to write everywhere something like props.message) and thus, making it easier to read.

💡 Tip 5: Use memoization to improve performance

I know that I am always talking about this in the latest articles, but... I really love it, and when done right, it improves a lot the performance of a web app.

So I had to include it again here.

Memoization is a technique for optimizing the performance of your React components by avoiding unnecessary re-renders. You could use the React.memo higher-order component or the useMemo hook to memorize components.

And yeah, here is an example:

In this example, the React.memo higher-order component is wrapping the component and memoizing it, so it will return a cached component if the value of the message prop is not changed.

Of course, this is not a heavy component, so this optimization won't give real improvements, but... it was a simple way to showcase it.

If you want to read more about the right ways to do it, I really recommend checking this.

💡 Tip 6: Use the key prop to improve performance

Maybe you have seen a warning in the dev console related to this one, so... it is a good one to know.

The key prop is a special prop in React that allows you to optimize the rendering of an array of components.

By specifying a unique key for each component in an array, React can keep track of which components have changed and only update the ones that need to be updated, improving the performance.

Less talk and more examples!

In this example, we render each item inside the array as a li element. And we are setting a key prop for each one based on the id we got on their objects.

Usually, if you do this without the key prop, you will see a warning in the dev console advising you to add a key prop. So probably you have already seen this.

These are the basics of this prop, but if you have some spare time, I recommend checking its docs here.

💡 Tip 7: Use inline styles sparingly

Some people will agree with this tip; others will hate me. But it is ok; I think this one is important for a clean codebase.

Inline styles can be helpful in certain situations but can also lead to maintenance headaches and poor performance. It is generally better to use CSS stylesheets (or even UI kits, Tailwind, you know...) to style your components and keep your code organized and maintainable.

Of course, you can prototype quickly doing inline styles but moving your code to something better (like CSS modules) before going to production!

As I said, a controversial tip.

---

As with every article, this one should have a conclusion. And the conclusion is that writing clean and efficient React code is crucial for your application's success (and for your fellow developers' mental health). But not only that, it will make your life easier once you get used to these practices.

And as always, these tips are not the absolute truth, and you could disagree. Knowing them and having your own opinion about them is important. I hope this gave you some thought material, and always, thanks for reading!

🌎 Let's Connect!

• My Twitter: @thenaubit
• My Substack (here I publish more in-depth articles)