React Component Render Method Being Called Twice For No Reason

import './App.css'; import SolarSystem from './components/solarSystem/solarSystem'; class App extends React.Component { componentDidMount(){ console.log('mounting'); }

Solution 1:

It is because of strict mode, code below doesn't demonstrate it because SO will build it with production set true (I think).

classStrictextendsReact.Component {
  componentDidMount() {
    console.log('mounting strict');
  }

  componentDidUpdate() {
    console.log('updating');
  }
  //const [SSVisibility, setSSVisibility] = useState(true);render() {
    console.log('rendering strict');
    return (
      <divclassName="App">
        {/*   <SolarSystemisShowing={"yolo"} toggle={"polo"}></SolarSystem> */}
      </div>
    );
  }
}
classNonStrictextendsReact.Component {
  componentDidMount() {
    console.log('mounting non strict');
  }

  componentDidUpdate() {
    console.log('updating');
  }
  //const [SSVisibility, setSSVisibility] = useState(true);render() {
    console.log('rendering Non strict');
    return (
      <divclassName="App">
        {/*   <SolarSystemisShowing={"yolo"} toggle={"polo"}></SolarSystem> */}
      </div>
    );
  }
}
constApp = () => {
  return (
    <div><React.StrictMode><Strict /></React.StrictMode><NonStrict /></div>
  );
};

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><divid="root"></div>