Sample code for a blog post about Optimizing Performance in React 18.6

big-grid-memo.js

import React from "react";
const BigGrid = ({ number }) => {
   ...
};

export default React.memo(BigGrid);

big-grid-numbers.js

const BigGrid = ({ numbers }) => {
  ...
};

big-grid-usage.js

<BigGrid numbers={[firstNumber, secondNumber]} />

big-grid-use-memo.js

const numbers = React.useMemo(() => [firstNumber, secondNumber], [firstNumber, secondNumber]);
<BigGrid numbers={numbers} />

use-callback.js

const [x, setX] = useState(1);
const logX = useCallback(() => console.log(x), [x]);
return <SomeComponent onClick={logX} />

use-memo.js

const numbers = React.useMemo(() => [firstNumber, secondNumber], [firstNumber, secondNumber]);