'Importing function components without use in React affects rendering

I noticed that React rendering seems to be affected by importing function components that affect rendering, even though I don't use those components. For example, in my code:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from './Pages/Home';
import LogIn from './Pages/Login';
import About from './Pages/About';
import Profile from './Pages/Profile';
import Feed from './Pages/Feed';
import Player from './Pages/Player';
import TradePortal from './Pages/Trading/TradePortal';
import Header from './test';


function App() {
  return (
      <Header />
  );
}

export default App;

I currently see this: enter image description here

If I delete import TradePortal from './Pages/Trading/TradePortal';, I see this: enter image description here

Does anyone know why this is?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source