Part I: Keep your application organized

1. Break down your application in meaningful parts
2. Reflect the defined application parts in code organization

Part II: Ease change: future-proof component code

1. State management
2. Loosely Coupled Component
3. Components decomposition patterns
4. Enable React warning and keep your dependencies up-to-date

Part III: Testing strategy and testable components

1. The many ways to test React code
2. A good testing strategy example
3. Make your components testable

TLDR;

On code organization

• Identifying the parts (domains) of your application will help to shape a better architecture (ex: state).
• Investing a small amount of time in finding a proper component’s name is an excellent design exercise that will bring consistency (location and well-defined responsibilities)

On component code

• Custom hooks are an excellent alternative to the Container/View pattern. Let your component focus on UI aspects.
• Ensure your component relies directly only on data that is displayed; otherwise, use a business logic helper, custom hooks.
• Beware of bad abstractions; they are the most likely to prevent change.
• Decomposition patterns and the UI provided by your Product Designer are a good starting point to build well-defined components

On testing

• React applications can be tested in many useful and different ways: E2E tests, Integrations tests, Unit shadow rendering tests, Unit business logic tests
• Invest time in testing the most important part of your product by defining a testing strategy
• Make sure your component can be tested easily by avoiding coupling and components embedded in business logic.