Приложение Big React — Ваше мнение о структуре [closed]

Я давно создал веб-сайт с использованием ReactJS, но мой проект растет и получает все больше кодов.

Пожалуйста, просмотрите мой структурный код

Моя нынешняя структура такая.

Это родительский компонент (App.js) Самый большой компонент у меня есть

import React, { PureComponent } from 'react';
import { Route, withRouter } from 'react-router-dom';
import Home from "./public/home";
import Dashboard from "./private/dashbaord";
...(around 66 component/packages imports)

class App extends PureComponent {
        constructor(props){
        super(props);
        this.state = {
            pathname: '/public',
            ...(around 15 states)
        };
    }

     componentDidMount() {
       this.checkAccepedCookies();
       this.isLogged();
       this.check404();
       this.insertGTM(); 
       this.insertTrustPiloit();
       this.checkDarkMode();
     }

     updateData(); //The updateData function used to update the pathname state so I can know if it's public or private
     connectWebSocket();
     signout();
     ...(around 21 functions)

    render(){
        return(
            <div>
                {this.state.isPolicy && <PolicyModal isPolicy={this.state.isPolicy} openPolicy={(boolean)=>this.setState({isPolicy: boolean})} />}
                {this.state.isOpenTrack && <TrackOrderModal isOpenTrack={this.state.isOpenTrack} ...(passing 3 props functions) />}
                {this.state.openUsers && <LoginModal ...(passing 3 props functions) />}
                {this.state.isOpenContact && <ContactSupportModal isOpenContact={this.state.isOpenContact} onClose={this.} />}
                {this.state.pathname === '/public' && <NavHome />}
                {!this.state.isCookiesAccepted && <CookiesModal openPolicy={()=>this.setState({isPolicy: true})} accept={()=>this.setState({isCookiesAccepted: true})} />}
               
                 //Buyers Routers
                    <Route path="/buy/" render={()=><BuyersBuy  updateData={this.updateData} />} /> 
                    <Route path="/refund/" render={()=><BuyersRefund  updateData={this.updateData} />} />
                    <Route path="/download/" render={()=><BuyersDownload updateData={this.updateData} />} />
                    ...(Around 18 Routes for Buyers)
                
                    //Then I have the sellers routers it's around 5 routers wrapped in a div like so

                //Sellers Routers
                 <div id='dashboard'>
                    {this.state.pathname === '/private' && <TopNavBarSellers />}
                    {this.state.pathname === '/private' && <LeftNavBarSellers />}
                    <Route path="/dashbaord/" render={()=><SellersDash updateData={this.updateData} />} /> 
                    (4 routers more)
                </div>

                //Users Routers (I haven't implemented the users section yet because I'm confused 
                // because the users section will be around 5 routers with 5 function extra I'm feeling I'm harming the app performance and this not a correct structure.)

            {this.state.pathname === '/public' && <FooterBuyers />}
            </div>
        )
    }
}

Этот App.js — самый большой файл, остальные компоненты довольно маленькие

App.js будет иметь Покупатели Маршрутизаторы также

о чем ты думаешь? Это правильная структура? Это вредит производительности?