React project best practices

The aim of this handbook is to develop guidelines for best practices when using React for small and large projects within rtCamp. However, we are making this public in the hope that other agencies and teams can also benefit from it. By adhering to these guidelines, developers can ensure:

• Consistency across different codebases and teams.
• Maintainability of the project as it grows and complexity.
• Scalability to adapt to changing requirements and future enhancements.

This handbook aims to empower developers with clear, actionable recommendations to write clean, efficient, and high-performing React applications.

Opinionated and evolving

This handbook is highly opinionated, reflecting practices and standards that align with our goals and experiences (e.g., preferred state management approach, coding style, or React patterns). It serves as a starting point for discussions and is expected to evolve with inputs from our ongoing practice and the broader world. Contributions, feedback, and discussions are encouraged to ensure the handbook remains relevant and adapts to new challenges and technologies.

While this handbook was primarily written for internal use, it has been structured with the flexibility to serve as a public resource, should it be shared with the broader React community.

What is the need for this Handbook?

• Reduced Code Review Time: By standardizing best practices, developers can avoid common mistakes, resulting in faster and more efficient code reviews.
• Enhanced Code Consistency: A unified approach to writing React code ensures consistency across multiple teams and projects.
• Encourages Innovation: Empowers team members to contribute new ideas, ensuring the document evolves with emerging React trends.

Resources and references

Links to React documentation, community best practices, and recommended books or blogs.

• react.dev
• Thinking in React
• The React Handbook
• Airbnb
• overreacted
• Tips for Writing Better React Code
• react.dev learn
• TanStack Query (React Query) Docs widely used for data fetching best practices.
• patterns.dev react
• nextjs.org react-foundations
• overreacted.io a-complete-guide-to-useeffect (Must read)
• overreacted.io before-you-memo
• dmitripavlutin.com react-useeffect-infinite-loop (Must read)
• dmitripavlutin.com how-react-updates-state
• dmitripavlutin.com dont-overuse-react-usecallback
• dmitripavlutin.com react-usememo-hook
• dmitripavlutin.com react-useref-guide
• dmitripavlutin.com react-state-management
• legacy.reactjs.org accessibility (Updated till v18.2)
• Toolkit from 10up