Benchmark: Memoization + useCallback (II)

HTML Preparation code:

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

Script Preparation code:

function ComponentWithInlineFunctionAndNonMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }
    return React.createElement(NonMemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithInlineFunctionAndMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }
    return React.createElement(MemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallbackAndNonMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = React.useCallback(evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }, []);
    return React.createElement(NonMemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallbackAndMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = React.useCallback(evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }, []);
    return React.createElement(MemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function NonMemoizedButton (props) {
    const { a, b, c, d, e, f, g, h, i, j, k, l, m, n, onClick } = props;
    const classes = ["some", "joined", "words", "in", "an", "array"]
    return React.createElement('button', {
        className: classes.join(" "),
        onClick: onClick
    }, 'Click me!');
}

const MemoizedButton = React.memo(function MemoizedWrapperComponent (props) {
    const { a, b, c, d, e, f, g, h, i, j, k, l, m, n, onClick } = props;
    const classes = ["some", "joined", "words", "in", "an", "array"]
    return React.createElement('button', {
        className: classes.join(" "),
        onClick: onClick
    }, 'Click me!');
});

window.rootElem = document.getElementById('root');

Tests:

Inline + NonMemoized
ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndNonMemoizedButton), window.rootElem)
Inline + Memoized
ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndMemoizedButton), window.rootElem)
useCallback + NonMemoized
ReactDOM.render(React.createElement(ComponentWithUseCallbackAndNonMemoizedButton), window.rootElem)
useCallback + Memoized
ReactDOM.render(React.createElement(ComponentWithUseCallbackAndMemoizedButton), window.rootElem)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Inline + NonMemoized
Inline + Memoized
useCallback + NonMemoized
useCallback + Memoized

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Inline + NonMemoized	380588.6 Ops/sec
Inline + Memoized	400253.9 Ops/sec
useCallback + NonMemoized	424851.9 Ops/sec
useCallback + Memoized	555124.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases.

**Benchmark Definition**

The benchmark is using React, a popular JavaScript library for building user interfaces. The script preparation code defines four different components:

1. `ComponentWithInlineFunctionAndNonMemoizedButton`: This component uses an inline function to update the state, which triggers a re-render.
2. `ComponentWithInlineFunctionAndMemoizedButton`: Similar to the previous one, but with memoization enabled using React's `React.memo` function.
3. `ComponentWithUseCallbackAndNonMemoizedButton`: This component uses the `useCallback` hook from React to create a memoized function that updates the state.
4. `ComponentWithUseCallbackAndMemoizedButton`: Similar to the previous one, but with memoization enabled.

The benchmark definition uses the `ReactDOM.render` method to render these components into a DOM element.

**Test Cases**

There are four test cases:

1. **Inline + NonMemoized**: This test case renders the `ComponentWithInlineFunctionAndNonMemoizedButton` component.
2. **Inline + Memoized**: Similar to the previous one, but with memoization enabled using React's `React.memo` function.
3. **useCallback + NonMemoized**: This test case renders the `ComponentWithUseCallbackAndNonMemoizedButton` component.
4. **useCallback + Memoized**: Similar to the previous one, but with memoization enabled.

**Options Compared**

The benchmark is comparing two options:

1. Using inline functions to update state (both `inline` cases).
2. Using the `useCallback` hook from React to create memoized functions (both `useCallback` cases).

**Pros and Cons of Each Approach**

**Inline Functions:**

* Pros:
	+ Easy to implement.
	+ Fast execution, as no additional overhead is added.
* Cons:
	+ Can lead to tight coupling between components, making it harder to reason about the code.
	+ State updates can trigger unnecessary re-renders.

**useCallback Hook:**

* Pros:
	+ Helps decouple function logic from component implementation.
	+ Reduces the number of unnecessary state updates and re-renders.
* Cons:
	+ Requires additional setup and management of memoized functions.
	+ Can lead to performance overhead if not used carefully.

**Memoization with React.memo:**

* Pros:
	+ Helps reduce unnecessary re-renders by caching function results.
	+ Can improve performance, especially in large-scale applications.
* Cons:
	+ Requires careful management of memoization to avoid stale data issues.
	+ Can add additional overhead if not used judiciously.

**Latest Benchmark Result**

The latest benchmark result shows that the `useCallback + Memoized` test case outperforms the other three test cases, indicating that using the `useCallback` hook with memoization can provide better performance and scalability benefits.

Related benchmarks:

Memoization + useCallback (II) (version: 0)

Comparing performance of: Inline + NonMemoized vs Inline + Memoized vs useCallback + NonMemoized vs useCallback + Memoized

Created: 2 years ago by: Registered User

Jump to the latest result

Inline + NonMemoized

Inline + Memoized

useCallback + NonMemoized

useCallback + Memoized

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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