Why Is My React Component Is Rendering Twice

Why is my react component rendering twice on initial load?

I've tried this out in code sandbox here and sure enough, it did render twice. This is because, in the index.js file, it uses React.StrictMode.

According to this documentation:
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
Class component constructor, render, and shouldComponentUpdate methods
Functions passed to useState, useMemo, or useReducer

This is usually to help spot side effects only in the development environment. It does not apply to a production environment.

So if you don't want it to render twice, simply remove the <React.StrictMode> </ React.StrictMode> in the index.js file and it'll work normally.

Hope it helps :)

Why does a simple React Component render twice?

OK looks like I found out the reason. After inspecting index.js I found the following:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Looks like create-react-app now includes React.StrictMode which double invokes certain methods in development mode (not in production).

Why does this component render twice in react?

Your app is using StrictMode. See your index.js file - your app is wrapped between a <React.StrictMode> element.

Using StrictMode will cause your app to render twice, but only in development mode. Creating an app with create-react-app will enable strict mode by default.

Here are the official docs for strict mode.

The solution is just to remove <React.StrictMode>, but that will also disable some of its advantages, so if it doesn't bother you, I'd just leave it as is, knowing it won't render like that in production.

See this related question for more details: My React Component is rendering twice because of Strict Mode

Why is my React component rendering twice?

FetchData is an Async operation - so your issue is that you are adding the Row component before getting data from the server. Hold off rendering <Row> until you have collected your albums.

return ( 
        <section className="cp-new-releases">
          { albums && // you might also want to test length here 
                      // - unless you want to show a message in your 
                      // Row component, indicating that non were found.
            <Row sectionHeading={`New Releases`} albums={albums}/>
          }
        </section>
     );

Now your Row element isnt created on initial load, but waits until you have got data, and then adds it. Think of it like, calling a function, you wouldnt call it unnecessarily, and only with valid data. Ultimately this is what you are doing when you add a component to a render function. So you have to add conditional logic, as Components are effectively functions, and should be invoked based on the logic of your particular use-case.

Why components in NextJS render twice after refreshing?

That's behaviour included in React in development mode. It re-renders everything twice to check for unhandled side effects and warn you about them.

Is component rendered twice? Is it codesandbox problem?

From React Docs - Strict Mode:

Starting with React 17, React automatically modifies the console
methods like console.log() to silence the logs in the second call to
lifecycle functions. However, it may cause undesired behavior in
certain cases where a workaround can be used.

Your component is indeed rendered twice but the log statements are hidden by React during the second re-render caused by StrictMode.

You will get the expected output if you remove the StrictMode.

Another option is to use a different method on console object for logging, such as console.dir.

let idCounter = 0;

function App() {
  const id = React.useMemo(() => {
    console.dir("useMemo");
    return idCounter++;
  }, []);

  console.dir("render");
  console.dir(id);

  React.useEffect(() => {
    console.log("useEffect", id);
  });

  return id;
}

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>, 
  document.querySelector("#root")
);

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

<div id="root"></div>