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 , 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. The component should have Single responsibility in the different components. Separate application state logic and presentation by declaring it only when necessary. Minimize the use of state Try to . Refer to the given link to learn how you can adapt it utilise Hooks https://reactjs.org/docs/hooks-intro.html You can use React.useMemo or React.useCallback for performance optimization. But Consider, React.memo should only be applied to pure components. React.useMemo and React.useCallback 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. You should not be using without measuring Keys help React identify which items have modified, are added, or are removed. Refer to this for more detail Use Key props, https://reactjs.org/docs/lists-and-keys.html or any duplicate value as Key props. Avoid using Indexes There is the possibility you can build a whole application without including any other library. B efore adding additional libraries know what inbuilt feature react offers. because testing ensures code integrity. Refer given link for more detail Write tests https://reactjs.org/docs/testing.html To avoid memory leaks in an application, If possible (API requests, Event listeners, timers) before moving out from the component. Clear all subscriptions and then update the state. Before updating the state of the component check if the component is in DOM 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
