На каком уровне находится приложение React MUI Dialog в приложении и где управлять его состоянием?

Question

Я довольно новичок в React, и у меня возникают некоторые трудности с управлением глобальным состоянием.У меня есть проект, в котором я использую Material UI, а точнее также диалоги (модалы).

У меня есть следующее в функции render () моего App.js

<ClientContext.Provider value={this.state.client}>
  <Router>
    <div>
      <Navigation />
      <div className="background"></div>
      <div className="content">
        <Route exact path={routes.HOME} component={() => <HomePage setTitle={ this.setTitle } />} />
      </div>
    </div>
  </Router>
</ClientContext.Provider>

ClientContext - это глобальный контекст React, в котором хранится информация о клиенте (например, имя, номер телефона и т. Д.)

На домашней странице у меня есть календарь, в котором клиент может сделать бронирование.Когда клиент щелкает слот на главной странице, появляется новый диалог для подтверждения.Функция render () моей HomePage выглядит следующим образом (BookSlot - это компонент, использующий диалоговое окно Material UI):

<div className={ classes.root }>
    <DayHeader date={ date } onDateChanged={ this.handleDateChange } canGoBack={ canGoBack } canGoForward={ canGoForward } />
    <BookSlot open={ this.state.bookSlot.open } onClose={ this.handleBookSlotClose } date={ this.state.bookSlot.date } begin={ this.state.bookSlot.begin } duration={ this.state.bookSlot.duration } />
    {
          shop && shop.serviceId && shop.barberId ?
          <Day date={ this.state.date } beginHour={ beginHour } endHour={ endHour } slots={ slots } handleSlotClick={ this.handleBookSlotOpen } /> :
          <div className={ classes.selectProps }>
            <p className={ classes.selectPropsText }>Selecteer onderaan het type bezoek en een barber om beschikbare uren te tonen.</p>
          </div>
    }
    <DayFooter />
</div>

Проблема в том, что когда клиент делает резервирование, его / ее данные обновляютсяЭто приводит к тому, что все приложение становится serenader (из-за компонента ClientContext.Provider в App.js), что вызывает повторное рендеринг HomePage, что, в свою очередь, приводит к исчезновению модального (потому что это дочерний элемент HomePage).

Итак, у меня есть два вопроса:

1. Это хорошая практика, чтобы поместить диалог в компонент страницы, как я делаю?Или мне тоже нужно положить его в App.js?Если да, как мне управлять состоянием (открыто / закрыто) из дочернего компонента?

2. Информация о клиенте используется во многих местах в приложении, поэтому я использовалReactContext.Это хороший способ сделать это?Или есть какой-то другой способ поделиться глобальными вещами?

Спасибо!