Frontend Best Practices

Frontend (React) Best Practices

There is no single "correct" way to do React development. Over the years, the community has adopted a series of best practices. We've seen the rise and fall of HOCs (Higher Order Components), the introduction of multiple versions of a context API, the rise of hooks, and more. The overall trajectory, however, is towards giving developers more tools to build more powerful, performant applications while minimizing boilerplate and effort.

The Caseflow code base itself shows a swath of this history. Most components were written to the best practices of their day, and still should be fully functional. There is no need to immediately go through and update all the old components, but one should adopt current best practices as much as possible when building new components or when refactoring/rewriting old ones.

Contents

• Basic Principles
  • Build Concise, Readable Components that are Function-Specific
  • Separate Data-Related Logic from Presentation Logic
  • Maximize Reusability
  • Redux in Caseflow
• Functional vs Class Components
• Directory Structure
• Styling
• Application State
• Form Management
• Storybook
• Testing
• Things to Avoid
• Accessibility

Other Links

• 🗂 Frontend Working Group Folder
• 📌 Caseflow Style Guide
• 📌 Storybook
• 📌 Outdated Dependencies