Benchmark: forwardRef perf vs simple

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-edu"></div>

Script Preparation code:

var people = [{a:1}, {a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1}]
var root = document.getElementById('root-edu');

Tests:

Component With forwardRef
const ComponentWithForwardRef = React.forwardRef((props, ref) => ( React.createElement('div', { ref: ref }, 'Component using forwardRef' ) )); var benchmarkTest = () => { ReactDOM.render(React.createElement(ComponentWithForwardRef), root); }; benchmarkTest();
Normal component
const ComponentWithoutForwardRef = (props) => ( React.createElement('div', null, // Your component content 'Component without forwardRef' ) ); var benchmarkTest = () => { ReactDOM.render(React.createElement(ComponentWithoutForwardRef), root); }; benchmarkTest();
Normal with list
const ComponentWithForwardRef = React.forwardRef((props, ref) => ( React.createElement('div', { ref: ref }, 'Component using forwardRef' ) )); const App = () => ( React.createElement('div', null, people.map((person, index) => ( React.createElement(ComponentWithForwardRef, { key: index }) )) ) ); ReactDOM.render(React.createElement(ComponentWithForwardRef), root);
forwardRef list
const ComponentWithoutForwardRef = (props) => ( React.createElement('div', null, // Your component content 'Component without forwardRef' ) ); const App = () => ( React.createElement('div', null, people.map((person, index) => ( React.createElement(ComponentWithoutForwardRef, { key: index }) )) ) ); ReactDOM.render(React.createElement(ComponentWithoutForwardRef), root);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Component With forwardRef
Normal component
Normal with list
forwardRef list

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 YaBrowser/24.4.0.0 Safari/537.36

Browser/OS: Yandex Browser 24 on Windows

View result in a separate tab

Test name	Executions per second
Component With forwardRef	125783.7 Ops/sec
Normal component	136639.2 Ops/sec
Normal with list	136594.3 Ops/sec
forwardRef list	140046.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance benchmarks for JavaScript components can be fascinating.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark with four test cases: two normal components, one with forwardRef, and one without forwardRef in a list context.

**Options Compared**

The options being compared are:

1. **ForwardRef**: A React feature that allows you to pass references from a child component to its parent.
2. **Normal Component**: A basic React component without any special features.
3. **List Context**: A scenario where components are rendered in a list, which can affect performance.

**Pros and Cons of Different Approaches**

1. **ForwardRef**: This approach allows for better communication between the child and parent components, but it also introduces additional overhead due to reference passing. In this benchmark, the component with forwardRef has slightly slower execution times.
2. **Normal Component**: This approach is simpler and faster than using forwardRef, as it doesn't require any special features or overhead.
3. **List Context**: Rendering components in a list can affect performance, especially if the list is large. However, this benchmark doesn't show significant differences in execution times between list context and normal component.

**Library Used**

The React library is used throughout these benchmarks. Specifically:

* `React.forwardRef`: A feature that allows you to pass references from a child component to its parent.
* `ReactDOM.render`: A method for rendering React components to the DOM.
* `React.createElement`: A method for creating React elements.

**Special JS Features or Syntax**

This benchmark doesn't use any special JavaScript features or syntax, such as async/await, Promises, or modern ES6+ features. It's a basic comparison of performance between forwardRef and normal component approaches.

**Other Alternatives**

If you're interested in exploring other performance benchmarks for React components, you can try:

* `create-react-app` benchmarking: You can use the built-in benchmarking tools provided by `create-react-app`, which allows you to create and run benchmarks for your React applications.
* Other benchmarking libraries like `jest-bench` or `benchmark- react`: These libraries provide more advanced features and options for creating and running performance benchmarks.

Keep in mind that performance benchmarks can vary depending on the specific use case, environment, and hardware.

Related benchmarks:

forwardRef perf vs simple (version: 0)

Comparing performance of: Component With forwardRef vs Normal component vs Normal with list vs forwardRef list

Created: 2 years ago by: Guest

Jump to the latest result

Component With forwardRef

Normal component

Normal with list

forwardRef list

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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