Best practices for reusable components in React

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.