Почему изменение состояния в App.js вызывает перемонтирование компонента?

Question

В файле App.js я делаю маршрутизацию (для маршрутизации я использую реагировать-маршрутыv4).С маршрутами есть также боковая панель.Причина боковой панели У меня есть состояние, которое контролирует эту боковую панель.При каждом изменении состояния боковой панели другой компонент, связанный с текущим маршрутом, перемонтируется.

Например, здесь у меня есть компонент Пользователь, который перемонтирует каждый раз, когда изменяется состояние боковой панели.А в компоненте User я выбираю данные с помощью ловушки useEffects, поэтому каждое изменение состояния боковой панели также вызывает эту ловушку.

const App = ({classes}) => {

    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    const handleDrawerToggle = () => {
        setIsDrawerOpen(!isDrawerOpen)
    };

    return (
        <BrowserRouter>

            <CssBaseline/>

            <Switch>

               <Route path={'/login'} component={Login}/>

               <Fragment>
                  <Sidebar isDrawerOpen={isDrawerOpen} toggleDrawer={handleDrawerToggle}/>
                  <main role="main" className={classes.content}>
                      <Switch>
                          <Route exact path='/' component={User(Dashboard)}/>
                          <Route path='/users' component={Admin(Users)}/>
                      </Switch>
                  </main>
              </Fragment>

          </Switch>

      </BrowserRouter>
   );
};

export default withStyles(styles)(App);

const Authorization = (allowedRoles) => (WrappedComponent) => {
 const WithAuthorization = (props) => {

     const role = helpers.getRole();

     if(role === null){
         return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
     } else if (allowedRoles.includes(role)) {
         return <WrappedComponent {...props} />
     } else {
         return <Typography>You don't have access</Typography>
     }

   };

    return WithAuthorization;
};

export default Authorization;

Не знаете, что вызывает такое поведение?

Answer 1

Это связано с тем, что HoC оценивается при каждом рендере.Попробуйте:

const AuthorisedComponent = requireLogin(MyComponent); // instantiate hoc once

<Route path="/mycomponent" component={AuthorisedComponent} /> // use hoc