Блог

Главная - Вопросы по программированию - Реагируйте на проблему с createContext и useContext

Реагируйте на проблему с createContext и useContext

#reactjs

Вопрос:

Поэтому я просто понял, что мой поставщик контекста в App() работал все это время каждый раз, когда я менял маршруты. Логически это имеет смысл, но не знаю, почему мне это никогда не приходило в голову. Проблема в том, что api-интерфейс каждый раз вызывает useEffect, хотя он мне не нужен, если я не нахожусь в компонентах, которые его действительно используют.

 function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Route path="/login" component={Login} />
        <Header />
        <PrivateRoute exact path="/" component={AddClient} />
        <PrivateRoute exact path="/add-client" component={AddClient} />
        <PrivateRoute exact path="/client-list" component={ClientList} />
        <PrivateRoute path="/promo-codes" component={Promo} />
        <TasksProvider>
          <PrivateRoute path="/task-manager" component={TaskManager} />
          <PrivateRoute exact path="/task-manager/:id" component={Modal} />
        </TasksProvider>
      </BrowserRouter>
    </AuthProvider>
  );
}

Сначала я попытался просто управлять одним состоянием в TaskManager, а затем перейти из TaskManager в модальный компонент, так как он был только на один уровень глубже, но оба этих компонента используют сокет.ио, чтобы творить магию в реальном времени (?), и просто продолжал перерисовывать и сталкиваться с проблемами (слишком длинная история). Так что в конце концов сработало только то, что поставщик контекста выполнял все управление состоянием.

В настоящее время я просто набил

 if (!window.location.pathname.includes("/task-manager") return;

в каждый эффект использования в поставщике задач, чтобы избежать этой проблемы. Итак, вопрос в том, какие еще варианты у меня есть, чтобы поддерживать аналогичную структуру и не позволять поставщику запускать ее каждый раз?

Ответ №1:

Согласно документации,

Компонент, вызывающий useContext, всегда будет повторно отображаться при изменении значения контекста. Если повторный рендеринг компонента обходится дорого, вы можете оптимизировать его с помощью запоминания.

Чтобы предотвратить запуск вызовов API или других дорогостоящих вычислений, вам необходимо поместить их в useMemo или memo. Это гарантирует, что они будут пересчитаны только в том случае, если изменятся зависимости (переданный в них аргумент). Узнайте больше здесь https://github.com/facebook/react/issues/15156#issuecomment-474590693

Метки: