ReactJS Best Practices

We list React best practices, methods, and techniques that will help us stay consistent during the app development

• State − The state should be avoided as much as possible. It is a good practice to centralize the state and pass it down the component tree as props. Whenever we have a group of components that need the same data, we should set a container element around them that will hold the state. Flux pattern is a nice way of handling the state in React apps.
• PropTypes − The PropTypes should always be defined. This will help is track all props in the app and it will also be useful for any developer working on the same project.
• Render − Most of the app’s logic should be moved inside the render method. We should try to minimize logic in component lifecycle methods and move that logic in the render method. The less state and props we use, the cleaner the code will be. We should always make the state as simple as possible. If we need to calculate something from the state or props, we can do it inside the render method.
• Composition − React team suggests to use a single responsibility principle. This means that one component should only be responsible for one functionality. If some of the components have more than one functionality, we should refactor and create a new component for every functionality.
• Higher Order Components (HOC) − Former React versions offered mixins for handling reusable functionalities. Since mixins are now deprecated, one of the solutions is to use HOC.
• Keep your components small – This might seem like an obvious one, but it’s worth calling out. Every good developer knows that small classes/modules/whatever are easier to understand, test, and maintain, and the same is true of React components. My mistake when starting out with React was under-estimating just how small my components should be. Of course, the exact size will depend upon many different factors (including you and your team’s personal preference!), but in general my advice would be to make your components significantly smaller than you think they need to be.
• Write stateless components
• Write functional components
• Use Redux.js
• Always use propTypes – propTypes offer us a really easy way to add a bit more type safety to our components.
• Use shallow rendering – Testing React components is still a bit of a tricky topic. Not because it’s hard, but because it’s still an evolving area, and no single approach has emerged as the ‘best’ one yet. At the moment, my go-to method is to use shallow rendering and prop assertions. Shallow rendering is nice, because it allows you to render a single component completely, but without delving into any of its child components to render those. Instead, the resulting object will tell you things like the type and props of the children. This gives us good isolation, allowing testing of a single component at a time.