Skip to main content

88. React for Dashboard UI Framework

Status: Accepted Date: 2025-07-06

Context​

We need to build a web-based user interface, the mercury-dashboard, to provide a way for users to visualize data, monitor the system, and interact with the Mercury backend. We need to choose a modern JavaScript framework for building this single-page application (SPA). The framework should be powerful, have a large ecosystem, and be well-suited for building data-intensive dashboards.

Decision​

We will use React as the primary framework for building the mercury-dashboard.

We will use the modern, function-based version of React with Hooks, in conjunction with Next.js as the application framework. This provides a robust foundation for building a feature-rich, interactive user interface. We are choosing React for:

  • Component-Based Architecture: Allows us to break down complex UIs into small, reusable, and composable components.
  • Huge Ecosystem: React has the largest ecosystem of libraries, tools, and community support of any frontend framework, making it easy to find solutions for common problems (e.g., state management, data fetching, charting).
  • Developer Popularity: It is the most popular and widely-used frontend framework, which makes it easier to hire developers and find learning resources.
  • Strongly Typed with TypeScript: It has excellent integration with TypeScript, which is a core part of our technology stack.

Consequences​

Positive:

  • High-Quality UIs: The component model and React's rendering performance make it possible to build complex, fast, and interactive user interfaces.
  • Developer Productivity: The vast ecosystem and component-based approach lead to high developer productivity. We can build and iterate on features quickly.
  • Vibrant Community: We benefit from the continuous innovation and support of the massive global React community.

Negative:

  • Unopinionated Nature: React itself is a library, not a full framework. It doesn't dictate things like state management, data fetching, or application structure. This can lead to inconsistency if not managed.
  • Performance Pitfalls: While fast, it's possible to write unperformant React code if developers are not careful about managing component re-renders.

Mitigation:

  • Using Next.js: We will use Next.js as our React framework. Next.js provides a more opinionated structure for routing, data fetching, and builds, which solves many of the problems of React's unopinionated nature.
  • Established Best Practices: We will follow established best practices for React development, including using a consistent state management solution (like Zustand or Jotai), using a data fetching library (like React Query or SWR), and enforcing code quality with ESLint.
  • Code Reviews and Profiling: We will use code reviews to enforce performance best practices and use React's developer tools to profile and optimize components that are causing performance bottlenecks.