Benchmark: React Spreading Props vs Seperate Props vs Combination Props

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Script Preparation code:

function ComponentSpreading() {
  const onClick = evt => evt.preventDefault();
  const someText = "text";
  const someArray = ['1','2','3'];
  return React.createElement('button', [{...{ someArray, someText, onClick}}], 'Click me!');
}
                                        
function ComponentExplicit() {
  const onClick = React.useCallback(evt => evt.preventDefault(), []);
  const someText = "text";
  const someArray = ['1','2','3'];
  return React.createElement('button', [{ someArray },{ someText },{ onClick }], 'Click me!');
}

function ComponentComboSpreading() {
  const rest = { test: '1', speed: '2', component: '3' };
  const onClick = React.useCallback(evt => evt.preventDefault(), []);
  const someText = "text";
  const someArray = ['1','2','3'];
  return React.createElement('button', [{...{ ...rest, someArray, someText, onClick}}], 'Click me!');
}

function ComponentComboExplicit() {
  const rest = { test: '1', speed: '2', component: '3' };
  const onClick = React.useCallback(evt => evt.preventDefault(), []);
  const someText = "text";
  const someArray = ['1','2','3'];
  return React.createElement('button', [{...rest},{ someArray },{ someText },{ onClick }], 'Click me!');
}

Tests:

Spreading
ReactDOM.render(React.createElement(ComponentSpreading), document.getElementById('root'))
Explicit
ReactDOM.render(React.createElement(ComponentExplicit), document.getElementById('root'))
Spreading with Rest
ReactDOM.render(React.createElement(ComponentComboSpreading), document.getElementById('root'))
Explicit with Rest
ReactDOM.render(React.createElement(ComponentComboExplicit), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spreading
Explicit
Spreading with Rest
Explicit with Rest

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spreading	618390.2 Ops/sec
Explicit	539049.9 Ops/sec
Spreading with Rest	602647.0 Ops/sec
Explicit with Rest	504295.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark tests three approaches for passing props in React components:

1. **Spreading**: This approach passes props as an object using the syntax `{...props}`. The `ComponentSpreading` function returns a button element with an array of strings, some text, and an onClick handler.
2. **Explicit**: This approach explicitly defines prop types and uses the `React.useCallback` hook to memoize functions that depend on those props. The `ComponentExplicit` function returns a button element with separate arrays for props.
3. **Combination Spreading**: In this approach, the props are spread onto an object called `rest`, which contains other props. The `ComponentComboSpreading` function returns a button element with an array of strings and some text, where both are passed as part of the combined `rest` object.
4. **Explicit with Rest**: This is similar to Combination Spreading but uses separate arrays for each prop type. The `ComponentComboExplicit` function returns a button element with separate arrays for props.

**Options being compared**

The benchmark compares the performance of these four approaches:

* **Spreading vs Explicit**: Which approach is more performant when passing props directly?
* **Spreading vs Spreading with Rest**: Is using an intermediate object (`rest`) beneficial or detrimental to performance?
* **Explicit vs Explicit with Rest**: Do separate arrays for each prop type provide a performance boost?

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Spreading**:
	* Pros: Simple, easy to read, and less overhead.
	* Cons: Might be slower due to the spread operator.
2. **Explicit**:
	* Pros: Provides explicit type definitions and can help catch errors at runtime.
	* Cons: Requires more code and might have a slight performance penalty.
3. **Combination Spreading**:
	* Pros: Combines benefits of spreading with explicit type definitions (if used wisely).
	* Cons: Might introduce unnecessary overhead if `rest` is too large or complex.
4. **Explicit with Rest**:
	* Pros: Similar to Combination Spreading but uses separate arrays for each prop type, which can be beneficial in performance-critical code.

**Library and Purpose**

The benchmark uses React and ReactDOM libraries. React is a JavaScript library for building user interfaces, while ReactDOM is used for rendering React components to the DOM.

**Special JS feature or syntax**

None mentioned explicitly, but using `React.useCallback` and spread operator (`{...}`) are modern JavaScript features that might not be familiar to all developers.

**Other alternatives**

For this specific benchmark, other approaches could include:

* Using a library like Immutable.js to manage state changes and props.
* Implementing custom prop management functions instead of relying on React's built-in mechanisms.
* Experimenting with different optimization techniques, such as code splitting or tree shaking, to reduce the bundle size.

Keep in mind that this benchmark is focused on passing props in React components, so alternative approaches would need to address similar challenges.

Related benchmarks:

React Spreading Props vs Seperate Props vs Combination Props (version: 0)

Testing to see what version of passing props is better performant

Comparing performance of: Spreading vs Explicit vs Spreading with Rest vs Explicit with Rest

Created: 5 years ago by: Registered User

Jump to the latest result

Spreading

Explicit

Spreading with Rest

Explicit with Rest

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):