DEV Community

Naga Chaitanya Konada
Naga Chaitanya Konada

Posted on

1

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.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs