Benchmark: Vue vs REact - MeasureThat.net

HTML Preparation code:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

Script Preparation code:

// Benchmarks
updateVueState()


// Test React
updateReactState()

Tests:

Vue
const { reactive } = Vue // Création d'un état réactif let state = reactive({ count: 0 }) // Fonction de test Vue.js function updateVueState() { for (let i = 0; i < 1000; i++) { state.count += 1 } }
React
// Simulation React let state = { count: 0 } // Fonction de test React function updateReactState() { for (let i = 0; i < 1000; i++) { state = { ...state, count: state.count + 1 } } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vue
React

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Vue	3263186.5 Ops/sec
React	185797632.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

LLMs can make mistakes. Check important info.

The provided benchmark compares the performance of state updates in two popular JavaScript frameworks: Vue.js and React. Specifically, it evaluates how each framework handles reactivity and state management through a series of operations aimed at incrementing a counter.

### Overview of the Test Cases

1. **Vue.js Implementation**: 
   - Uses Vue's `reactive` function to create a reactive state object. 
   - The `updateVueState` function increments the count property of the reactive state within a loop 1,000 times. This makes use of Vue's reactive reactivity system to ensure that changes to the state are automatically detected and managed.
   
    ```javascript
    const { reactive } = Vue;
    let state = reactive({ count: 0 });
    function updateVueState() {
      for (let i = 0; i < 1000; i++) {
        state.count += 1;
      }
    }
    ```

2. **React Implementation**:
   - Utilizes a pure JavaScript object for state management, simulating React's state updates. 
   - The `updateReactState` function also increments the count, but it does so by creating a new object every time (using the spread operator `...`), which reflects how React manages state in functional components, leveraging immutability.
   
    ```javascript
    let state = { count: 0 };
    function updateReactState() {
      for (let i = 0; i < 1000; i++) {
        state = { ...state, count: state.count + 1 };
      }
    }
    ```

### Performance Results

From the benchmark results:
- **React** achieved approximately **111,683,120** executions per second.
- **Vue** managed about **216,614.90625** executions per second.

### Analysis of Options Compared

**Reactivity Approaches**:
- **Vue**: 
  - **Pros**: 
    - Provides a built-in reactivity system that is easy to use and leverages JavaScript proxies under the hood. The increment operation directly modifies the reactive state without creating a new object each time.
    - Potentially offers better performance for a large number of state updates since it tracks changes more efficiently with a single reactive reference.
  - **Cons**:
    - The overhead of Vue's reactivity system might introduce some performance costs for trivial state updates, especially when comparing to a more lightweight, primitive approach.
  
- **React**: 
  - **Pros**:
    - Follows the principle of immutability and functional programming, which can lead to easier reasoning about code and better integration with libraries designed for Redux-like state management.
    - Might offer better performance in scenarios requiring extensive state changes due to optimizations around re-rendering in its virtual DOM.
  - **Cons**:
    - The method used in the benchmark (spreading the state object) incurs overhead by creating new objects, which can lead to more garbage collection and a potential hit on performance with numerous updates.
    
### Other Considerations

- **Libraries**: 
   - The benchmark utilizes Vue.js and React, both of which are frameworks that help manage the user interface in modern web applications by managing UI components and their states effectively.
   
### Alternatives

When evaluating frameworks for state management beyond Vue and React, consider the following alternatives:

- **Svelte**: 
  - A compiler-based framework that compiles components into highly efficient imperative code. It does not use a virtual DOM and offers a unique reactivity model that inherently optimizes performance.
  
- **Angular**:
  - An all-in-one framework that includes a robust state management system through its services and RxJS for reactive programming, which might be considered heavier than Vue and React for smaller projects.

- **MobX or Redux**:
  - Libraries that can be used alongside React for state management, allowing for more structured approaches, particularly in larger applications.

### Conclusion

The benchmark effectively highlights key performance differences between JavaScript's two predominant UI frameworks—Vue and React—specifically around state management and reactivity. Each framework has its strengths and weaknesses, and the choice often comes down to the specific needs of the project, the developer's familiarity with the framework, and the goals set for performance and maintainability.

Related benchmarks:

Vue vs REact (version: 1)

Comparing performance of: Vue vs React

Created: 5 months ago by: Guest

Jump to the latest result

Vue

React

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):