Benchmark: Test UseRef - MeasureThat.net

HTML Preparation code:

<div id="root"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

Script Preparation code:

function ChildComponent(props) {
    return React.createElement("div", props);
}

const a = {
    a: "hello",
    b: "world"
}


function UseMemoAlone(props) {
    const handler = React.useMemo(() => {
        return {
            ...a,
            c: "!!"
        }
    }, []);
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

function NoMemo(props) {
    const handler = {
        ...a,
        c: "!!"
    };
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

function UseRefAlone(props) {
    const handler = React.useRef({
        ...a,
        c: "!!"
    });
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

var propCases = [{
    handler: function() {
        return Math.random();
    },
    wait: 100
}, {
    handler: function() {
        return Math.random();
    },
    wait: 200
}, {
    handler: function() {
        return Math.random();
    },
    wait: 300
}];
propCases.push(propCases[1]);

Tests:

No useMemo
propCases.forEach((props) => { ReactDOM.render(React.createElement(NoMemo, props, null), root); });
useMemo
propCases.forEach((props) => { ReactDOM.render(React.createElement(UseMemoAlone, props, null), root); });
useRef
propCases.forEach((props) => { ReactDOM.render(React.createElement(UseRefAlone, props, null), root); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
No useMemo
useMemo
useRef

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

useRef

14K/s

useMemo

14K/s

No useMemo

13K/s

View exact numbers

Test name	Executions per second
✓ useRef	14,333 Ops/sec
useMemo	13,961 Ops/sec
No useMemo	12,505 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that tests the performance of three different approaches for handling state updates in React components:

1. **No useMemo**: This approach does not use the `useMemo` hook to memoize the computation.
2. **useMemo**: This approach uses the `useMemo` hook to memoize the computation, which means that the function is only computed when the dependencies change.
3. **useRef**: This approach uses the `useRef` hook to store a value in a variable, which can be used to memoize the computation.

**Options being compared**

The benchmark compares the execution performance of these three approaches on different versions of Chrome (126) on a Mac with an Intel processor, running macOS 10.15.7.

**Pros and Cons**

* **No useMemo**: This approach has no benefits in terms of performance optimization but can lead to unnecessary recomputations when dependencies change.
* **useMemo**: This approach uses the `useMemo` hook, which provides a way to memoize computations based on specific dependencies. However, it requires explicit management of the dependencies and can be more complex to use.
* **useRef**: This approach uses the `useRef` hook, which provides a simple way to store values in variables that can be used for memoization. It is often considered easier to use than `useMemo`.

**Other considerations**

When choosing between these approaches, consider the specific requirements of your application:

* If you have dependencies that change frequently and you need to recalculate some values, using `useMemo` might be a good choice.
* If you want a simple way to store values in variables without explicit dependency management, using `useRef` could be a better option.

**Library and purpose**

The benchmark uses the following libraries:

* React: A JavaScript library for building user interfaces.
* ReactDOM: A JavaScript library for rendering React components.
* Lodash: A utility library that provides functions like `lodash.min()`, which is used in the benchmark to minimize memory allocations.

**Special JS features or syntax**

The benchmark uses some special JavaScript features and syntax, including:

* The `useMemo` and `useRef` hooks, which are part of React's Context API.
* Template literals (`\r\n...a,\r\n...c\r\n`), which allow for string interpolation.

**Alternatives**

If you're interested in exploring alternative approaches or libraries, here are some options:

* Instead of using React and JSX, you could use a different library like Angular or Vue.js.
* For memoization, you might consider using libraries like memoize.js or immer.js instead of `useMemo` or `useRef`.
* If you want to explore more advanced optimization techniques, you could look into using Webpack's code splitting or Dead Code Elimination features.

Test UseRef (version: 0)

Comparing performance of: `No useMemo vs useMemo vs useRef`

Created: 2 years ago by: Guest

Go to the latest result

No useMemo

useMemo

useRef

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Test UseRef (version: 0)

Comparing performance of: No useMemo vs useMemo vs useRef

Created: 2 years ago by: Guest

Go to the latest result

No useMemo

useMemo

useRef

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `No useMemo vs useMemo vs useRef`