react children component rendered twice?

Question

I've a simple child component that have string props, and why is it rendered twice at first laod?

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyChild a={1} b={2} />
    </div>
  );
}

const MyChild = ({ a, b }) => {
  console.log("hi"); //called twice?
  return <h1>hi</h1>;
};

demo https://codesandbox.io/s/wizardly-lamport-pesw42?file=/src/App.js

I guess "in reality" you mean in production, yes in production it renders once and in development it renders twice. BTW if you so concern regarding renders, you really should research about "premature optimization" — Dennis Vash, Apr 10 '22 at 14:07

score 0 · Answer 1 · answered Apr 10 '22 at 13:38

0

https://codesandbox.io/s/suspicious-curran-rbyyhn?file=/src/index.js

Remove StrictMode in index.js.

It makes react render twice

answered Apr 10 '22 at 13:38

Taehyun Hwang

232
1
2
10

react children component rendered twice?

1 Answers1