ReactJS - Elevando o estado versus mantendo um estado local

Na minha empresa, estamos migrando o front-end de um aplicativo da web para o ReactJS. Estamos trabalhando com o create-react-app (atualizado para a v16), sem o Redux. Agora estou preso em uma página cuja estrutura pode ser simplificada pela seguinte imagem:

Os dados exibidos pelos três componentes (SearchableList, SelectableList e Map) são recuperados com a mesma solicitação de back-end no diretóriocomponentDidMount() método de MainContainer. O resultado dessa solicitação é armazenado no estado MainContainer e possui uma estrutura mais ou menos assim:

state.allData = {
  left: {
    data: [ ... ]
  },
  right: {
    data: [ ... ],
    pins: [ ... ]
  }
}

LeftContainer recebe como suportestate.allData.left MainContainer e passaprops.left.data para SearchableList, mais uma vez como suporte.

RightContainer recebe como suportestate.allData.right MainContainer e passaprops.right.data para SelectableList eprops.right.pins mapear.

SelectableList exibe uma caixa de seleção para permitir ações em seus itens. Sempre que uma ação ocorre em um item do componente SelectableList, ela pode ter efeitos colaterais nos pinos do Mapa.

Decidi armazenar no estado RightContainer uma lista que mantém todos os IDs de itens exibidos por SelectableList; essa lista é passada como adereços para SelectableList e Map. Então passo para SelectableList um retorno de chamada, th, sempre que uma seleção é feita, atualiza a lista de IDs dentro do RightContainer; novos adereços chegam em SelectableList e Map, e assimrender() é chamado nos dois componentes.

Funciona bem e ajuda a manter tudo o que pode acontecer com SelectableList e Map dentro do RightContainer, mas estou perguntando se isso está correto para olevantamento-estado efonte única da verdade conceitos.

Como alternativa viável, pensei em adicionar um_selected propriedade para cada item emstate.right.data no MainContainer e passe três níveis de retorno de chamada de seleção para SelectableList, manipulando todas as ações possíveis no MainContainer. Porém, assim que ocorrer um evento de seleção, isso forçará o carregamento do LeftContainer e RightContainer, introduzindo a necessidade de implementar lógicas comoshouldComponentUpdate() evitar inútilrender() especialmente no LeftContainer.

Qual é / poderia ser a melhor solução para otimizar esta página do ponto de vista arquitetônico e de desempenho?

Abaixo, você encontra um extrato dos meus componentes para ajudá-lo a entender a situação.

MainContainer.js

class MainContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allData: {}
    };
  }

  componentDidMount() {
    fetch( ... )
      .then((res) => {
        this.setState({
          allData: res
        });
      });
  }

  render() {
    return (
      <div className="main-container">
        <LeftContainer left={state.allData.left} />
        <RightContainer right={state.allData.right} />
      </div>
    );
  }
}

export default MainContainer;

RightContainer.js

class RightContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItems: [ ... ]
    };
  }

  onDataSelection(e) {
    const itemId = e.target.id;
    // ... handle itemId and selectedItems ...
  }

  render() {
    return (
      <div className="main-container">
        <SelectableList
          data={props.right.data}
          onDataSelection={e => this.onDataSelection(e)}
          selectedItems={this.state.selectedItems}
        />
        <Map
          pins={props.right.pins}
          selectedItems={this.state.selectedItems}
        />
      </div>
    );
  }
}

export default RightContainer;

Desde já, obrigado!