react

React

• Use React in Strict Mode
• Use React with TypeScript
• Avoid nested routing if using React Router
• Prefer Function Components over Class Components
• Prefer keeping a single component in each file
• Use PascalCase for component names and their file names
• Use React Hooks
• Use pre-built hooks when possible (e.g. streamich/react-use)
• Use custom hooks to encapsulate stateful logic outside a component
• Avoid nesting Forward Refs
• Avoid Higher-Order Components and recompose (see hooks above as an alternative)
• Prefer the children prop over render props
• Prefer using TypeScript prop interfaces over PropTypes
• Prefer the short syntax when using Fragments
• Prefer React Contexts over Redux
• Avoid using indexes as the value for keys
• Prefer component composition over component inheritance

General Philosophies

• For greenfield React projects we like to use TypeScript. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. For a quick introduction, check out TypeScript in 5 minutes.
• If our app needs to make network requests and hold state outside of a component, we like using GraphQL and our preferred library is Apollo. We have a section on GraphQL in our Guides.
• When building React apps with TypeScript and Apollo, we've found working in VSCode to be a mostly-good experience.