useEffect not running Windows 10 React-CodePudding

Fresh install of create-react-app project on Windows 10, useEffect is not working.

Injected the following code inside the App function to test:

useEffect(() => {
  console.log('effect');
});

Upon starting the application, I cannot see any output in the terminal in which the command npm start was run where this was previously visible on a Linux machine.

EDIT:

Fresh create-react-app with useEffect added after creation:

import {useEffect} from 'react'

import logo from './logo.svg';
import './App.css';

function App() {

  
  useEffect(() => {
    console.log('effect');
  });
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Get the following output:

Compiled successfully!

You can now view test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.30.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/ 1.49 MiB
  asset static/js/bundle.js 1.48 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.87 KiB [emitted] 1 related asset
  asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
cached modules 1.36 MiB [cached] 105 modules
runtime modules 31.3 KiB 15 modules
./node_modules/webpack-dev-server/client/index.js?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&reconnect=10 6.59 KiB [built] [code generated]
webpack 5.66.0 compiled successfully in 3028 ms

CodePudding user response：

Just create a new functional component and put it inside App.js as child component. Use it as wrapper (as parent) for all further components.

CodePudding user response：

This fresh setup works fine:

import { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  useEffect(() => {
    console.log('Working?');
  });

  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;