paint-brush
10 Best Practices for Every React Developerby@ruchikamourya
2,813 reads
2,813 reads

10 Best Practices for Every React Developer

by Ruchika MouryaApril 5th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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. In this article, we will be discussing how to get the most out of React library and what steps should be taken. component should have Single responsibility. Separate application state logic and presentation in the different components. Minimize the use of state by declaring it only when necessary. Try to utilise Hooks.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.Use Key props.Avoid using Indexes or any duplicate value as Key props.Before adding additional libraries know what inbuilt feature react offers. Write tests.avoid memory leaks in an application

Company Mentioned

Mention Thumbnail
featured image - 10 Best Practices for Every React Developer
Ruchika Mourya HackerNoon profile picture


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.

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. Write tests because testing ensures code integrity. Refer given link for more detail https://reactjs.org/docs/testing.html


  10. 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.


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.


Also Published here