Run results for: useMemo slice

Run details:

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

Browser: Chrome 129

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
Memoized App	56591.6 Ops/sec
Default App	57108.2 Ops/sec

HTML Preparation code:

<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<div id="root"></div>

Script Preparation code:

const mockItems = Array(6)
	.fill("")
	.map((_value, index) => ({
		id: index + 1,
		src: "",
	}));


const Demo = ({isMobile = true}={}) => {
  const [items, setItems] = React.useState(mockItems);

  const itemsToShow = items.slice(0, isMobile ? 6 : 5);

  return React.createElement(
    "div",
    null,
    React.createElement("div", null, itemsToShow.map(i=>i.id)),
  );
};

const MemoizedDemo = ({isMobile = true}={}) => {
  const [items, setItems] = React.useState(mockItems);

  const itemsToShow = React.useMemo(()=>items.slice(0, isMobile ? 6 : 5),[items, isMobile]);

  return React.createElement(
    "div",
    null,
    React.createElement("div", null, itemsToShow.map(i=>i.id)),
  );
};

const Wrapper = ({ children }) => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    if (count < 10000) {
      setCount((c) => c + 1);
    }
  }, [count]);

  return React.createElement("div", null, children);
};

function App () {
  return React.createElement(
    Wrapper,
    null,
    React.createElement(Demo, null)
  );
};

function MemoizedApp() {
  return React.createElement(
    Wrapper,
    null,
    React.createElement(MemoizedDemo, null)
  );
};

Tests:

Memoized App
ReactDOM.render(React.createElement(MemoizedApp), document.getElementById('root'))
Default App
ReactDOM.render(React.createElement(App), document.getElementById('root'))

Run results for: useMemo slice

Memoized App

Default App