React Best Practices

How to get the most out of React library and what steps you should take.

React is one of the most popular front-end libraries for JavaScript. It offers numerous great features, but as we know everything has pros and cons. If you don't know how to use any technology properly instead of simplifying things it can make whole stuff complex.

Photo by Lautaro Andreani on Unsplash

In this article, we will be discussing how to get the most out of React library and what steps should be taken. Let's start

1. The component should have Single responsibility, Don’t create large components that render many things directly. It makes your component difficult to maintain and it hinders React’s optimizations, Because it has to create a bunch of elements and calculate the diff.
2. Separate application state logic and presentation in the different components.
3. Minimize the use of state by declaring it only when necessary.
4. Try to utilise Hooks. Refer to the given link to learn how you can adapt it https://reactjs.org/docs/hooks-intro.html
5. You can use React.useMemo or React.useCallback for performance optimization.But Consider, React.memo should only be applied to pure components. You should not be using React.useMemo and React.useCallback without measuring because those optimizations come with a price and you have to make sure what is the cost as well as the benefit, so you can decide whether it will actually be beneficial or not.
6. Use Key props, Keys help React identify which items have modified, are added, or are removed. Refer to this for more detail https://reactjs.org/docs/lists-and-keys.html
7. Avoid using Indexes or any duplicate value as Key props.
8. Before adding additional libraries know what inbuilt feature react offers. There is the possibility you can build a whole application without including any other library.
9. To avoid memory leaks in an application,

• If possible Clear all subscriptions(API requests, Event listeners, timers) before moving out from the component.
• Before updating the state of the component check if the component is in DOM and then update the state.

10. Write tests because testing ensures code integrity. Refer given link for more detail https://reactjs.org/docs/testing.html

I have listed a few practices here and will be adding more in the future. In the comments let me know what guidelines you follow while writing any react application.

I hope this was helpful. Do comment and share and let me know if you like it, your small effort encourages me to write more.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.