Best practices for reusable components in React

#react #reusable #component #optimisation

These are some of the points related to best practices for reusable components in React-based projects.

Components should be small and easy to read.
Use prop-types package to structure and validate the props of your components.
For styled-components, do not include any functional details, instead pass them as props.
For container components, do not include UI details, instead, let the children styled-components take care of them
Prefer functional components vs class-based components.
Prefer CSS in JS strategy for styled-components for better maintainability.
UI variations should be coming in as configurable props whereas data should be coming up as part of a global state like Redux or React Context.
Don’t repeat sections wherever it can be avoided, instead use arrays to store those section details and loop over them.
For components, add comments only wherever absolutely necessary (to indicate a hack or workaround for a bug).
For library utilities (pure functions), write JS-Doc comments.
Avoid using anonymous components wherever possible.
All files for a component should be part of the same folder.
Always use eslint and prettier for keeping your code clean and formatted.
Use ES6 features.