Skip to content

Latest commit

 

History

History
53 lines (41 loc) · 2.46 KB

REACT.md

File metadata and controls

53 lines (41 loc) · 2.46 KB

React Notes

General

  • Use Typescript for react components.
  • Use the strict compiler option to avoid type coercion.
  • Use null instead of undefined to avoid type coercion.
  • Always format your code before committing it.

Imports

  • Keep imports sorted and grouped by type.
  • Group imports by type, first external imports, then internal imports, and finally same folder imports.
    • External imports: import React from 'react'
    • Internal imports: import { Button } from 'src/components/Button'
    • Same folder imports: import { Button } from './Button'
  • Use absolute imports instead of relative imports : import { Button } from 'src/components/Button' instead of import { Button } from '../../components/Button'.

Components

  • Use functional components instead of class components.
  • Use hooks instead of class components.
  • Use React.memo to avoid unnecessary re-renders.
  • Use React.lazy to lazy load components.
  • Use React.Suspense to lazy load components.
  • Use React.Fragment to avoid unnecessary divs.
  • Use React.forwardRef to forward refs to components.
  • Don't use React.createContext to create contexts, use the useContext hook instead.
  • Deconstruct props to avoid repeating props in the component.
  • Don't use index for keys on lists use a unique id instead.
  • Don't create components inside other components create them outside and import them.

Naming conventions

  • Components Use PascalCase for components and filenames.
  • Folders Use camelCase for folders.
  • Hooks Use camelCase for hooks and their filenames.
  • Files Use camelCase for index.ts(x) and other files except for components

Code style

  • Spacing Use spaces instead of tabs.
  • Indentation Use 2 spaces for indentation.
  • Quotes Use single quotes for strings in js code and double quotes for jsx.

Principles

  • Single responsibility principle A component should only have one responsibility.
  • Composition Components should be composed instead of inheriting from other components.
  • Separation of concerns Components should be separated by concerns.
  • Don't repeat yourself Avoid repeating code.
  • Keep it simple Keep components simple and easy to understand, avoid complex components. If a component is too complex, break it down into smaller components.
  • Keep it small Keep components small, avoid having too many lines of code in a single component, think about atomic design.