React – useMemo without dependencies array vs empty array

Question

Using useMemo() without dependencies array will calculate the value on every render.

If no array is provided, a new value will be computed on every render.

It’ll be equivalent to

const value = ...

Using useMemo() with an empty dependencies array will calculate the value only once, on mount.

Demo:

const App = () => {
    const value1 = React.useMemo(() => {
      console.log('calculating value1');
    });
    const value2 = React.useMemo(() => {
      console.log('calculating value2');
    }, []);
    const [counter, setCounter] = React.useState(0);
    return (
      <button onClick={() => setCounter(counter + 1)}>{counter}</button>
    );
};

ReactDOM.render(<App />, document.querySelector('.react'));

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

Leave a Comment Cancel reply