React component is calling memo function twice

Question

If i create a React component like so:

import { useMemo } from "react";

let id = 0;

function updateLogAndGetId() {
  const newId = id++;
    console.log(newId);
    return newId;
}

export const MyComponent = () => {
  const componentId = useMemo(updateLogAndGetId, []);
  console.log("outside", componentId);
  return <li>{componentId}</li>;
};

render(<><MyComponent /><MyComponent /></>)

The HTML output will be: 1 3

the console output would be: 0 1 2 3

Why is it that the updateLogAndGetId is invoked 4 times, when only two components are added to the dom?

Are there any way to ensure that updateLogAndGetId is only invoked once pr component?

Here as a sandbox with a working example: https://codesandbox.io/s/dreamy-dream-rti4tp

omar · Accepted Answer · 2022-08-05 18:59:46Z

2

The React StrictMode renders components twice on development (not production)

// your index.tsx :
import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

you can remove it and test your console.log again

// your index.tsx :
import * as ReactDOMClient from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

// render your App component without the StrictMode :
root.render(
    <App />
);

more about React StrictMode

answered Aug 5, 2022 at 18:59

omar

5363 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tau Over a year ago

Wow great spot! I found this behaviour working on a nextjs app. Console.log statements get's turned off for the double renders in Chrome (which is not the case in the virtual log in codesandbox) . which caused me to be even more confused. Thank you for your assistance

Collectives™ on Stack Overflow

React component is calling memo function twice

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related