βš›οΈ

React

Component-based library for building user interfaces with a large ecosystem

Results Summary

Performance

96%
Lighthouse Score

Bundle Size

49.1KB
Gzipped

Build Time

1.7s
Average

Load Time

2.2s
LCP

Complexity

90
Cyclomatic

Performance Metrics

CLS
0.0000
FCP
1922ms
LCP
2230ms
TBT
148.5ms

Bundle Analysis

Compression
3.1x
File Count
1
JS %
100.0%
Total Size
154.8KB

Build Info

Build Time
1.7s
Output Size
2.3MB
HMR Time
105ms
Dev Startup
1.0s

About the React Weather Front App

Status

  • Lint
  • Build
  • Test

Usage Instructions

First, follow the repo setup instructions.
Then cd into ./apps/react/ and and use the following commands:

  • Dev Command npm run dev
  • Test Command npm run test
  • Lint Command npm run lint
  • Build Command npm run build
  • Start npm start
For troubleshooting, use npm run verify from the root of the project.

App Requirements

The purpose of this project, was to build the same identical app in every frontend framework, in order to benchmark and compare their performance. As such, each app is built to meet identical requirements, which are then verified with the test suite.

Technical Requirements

  • Binding user input and validation
  • Fetching external data asynchronously
  • Basic state management of components
  • Handling fallback views (loading, errors)
  • Using browser features (location, storage, etc)
  • Logic blocks, for iterative content and conditionals
  • Lifecycle methods (mounting, updating, unmounting)

Feature Requirements

  • 🌦️ Live weather conditions
  • πŸ“… 7-day weather forecast
  • πŸ” City search functionality
  • πŸ“ Geolocation support
  • πŸ’Ύ Persistent location storage
  • πŸ“± Responsive design
  • β™Ώ Accessible interface
  • 🎨 Multi-theme support
  • πŸ§ͺ Fully unit tested
  • 🌐 Internationalized

React Implementation

Custom Hooks

The useWeatherData custom hook encapsulates all weather-related state and logic, demonstrating React's hooks pattern for reusable stateful logic.

Error Boundary

The app includes an ErrorBoundary component using class-based lifecycle methods to catch JavaScript errors anywhere in the component tree.

useCallback & useEffect Optimization

Extensive use of useCallback for memoizing functions and useEffect with proper dependency arrays to prevent unnecessary re-renders and infinite loops.

Conditional Rendering Patterns

React's conditional rendering using logical operators (&&) and ternary expressions for showing loading states, errors, and weather content based on application state.

Functional Components

All components are functional components using hooks, showcasing modern React patterns over legacy class-based components.

About React

Real-world App

Since the weather app is very simple, and doesn't show of the full features of a framework, it may be helpful to see a more practical implementation of a React app. So, checkout:
Web Check Logo

Web Check

All-in-one OSINT tool for analyzing any site

Intro to React

About React

React is the most popular frontend library, created by Facebook in 2013. It popularised the component model and virtual DOM, changing frontend forever. Its ecosystem is massive, with libraries for everything. The downside is that it’s just a view layer, so you end up wiring lots of pieces together. Still, it runs huge apps like Facebook, Instagram and Netflix.

My thoughts on React

React is everywhere, powering millions of websites and used by every major tech company. It's been around for over 12 years, and both React and its tooling are incredibly mature. There's a reason it became the default choice for so many teams - the ecosystem is massive, jobs are plentiful, and you can build basically anything.

But it's not perfect. Our weather app showcases both React's strengths and frustrations. The component model is elegant, useState and useEffect work fine for simple state, and the custom useWeatherData hook abstracts the weather logic nicely. But you're constantly thinking about re-renders, dependency arrays, and manual memoization.

The virtual DOM adds overhead that other frameworks avoid entirely. Need to optimize performance? Time to sprinkle React.memo, useCallback, and useMemo everywhere. Coming from Svelte or Solid, all this manual work feels tedious. But the developer tooling is exceptional and the community support is unmatched.

The JSX syntax is familiar once you get used to the quirks - className instead of class, self-closing tags, and JavaScript expressions in curly braces. Controlled components with value and onChange work well for forms, though they're more verbose than Vue's v-model.

React really shines for complex applications where the ecosystem matters. We didn't need Redux, React Query, or code splitting for this simple weather app, but for something like Web Check, these tools become essential. The flexibility to choose your own architecture is both React's blessing and curse.

Choosing a Framework

Stack Match Stack Match

Not sure if React is right for your project? Use Stack Match to select your preferences and get a tailored recommendation based on the benchmark data.

Stack Match Screenshot