Regarding the output

I am getting the output like this every function is being repeated 2 times ive tried to olve this but couldn’t find the solution.


Screenshot 2023-10-06 170527

This is my code…
please clarify this please

@sahityasingh1211 , can you please check this query?

1 Like

Hii there!
This is happening because when you render the ‘App’ component it also renders the ‘Home’ component as this is expected behavior in React.

To fix this try the following:

class App extends React.Component {
constructor() {
super();
}

componentDidMount() {
// This will only be logged once
console.log(“code inside didmount”);
}

render() {
// This will only be logged once
console.log(“code inside render”);

return (
  <>
    <h1>this is super constructor </h1>
    <Home />
  </>
);

}
}

class Home extends React.Component {
render() {
// This will only be logged once
console.log(“code inside child component”);

return (
  <>
    <h1>Hello from home component</h1>
  </>
);

}
}

I hope this solves your problem. If you face any issue please share your doubt :blush:

you didn’t mentioned about the export defaults and yet the code is not working it is returning the same output kindly review once again

there is nothing wrong in my code this behaviour is because of react strictmode if we remove them and use react fragments instead the problrm is reslved