Usar uma chamada de API no ComponentDidMount para atualizar o repositório Redux faz com que meu componente seja renderizado duas vezes
Eu sou um novato em React / Redux. Qualquer ajuda seria ótimo. Eu tenho um componente que faz uma chamada de API no ComponentDidMount para obter dados e atualizar meu repositório Redux. Esse componente também usa connect para obter o estado Redux e passá-lo como suporte para um componente burro.
componentDidMount() {
this.props.dispatch(fetchSite()) //this triggers the api call and updates the redux store.
}
return (
<div>
<Child
myprop={this.props.name}
/>
</div>
export default connect((state) => ({name: state.name}))(Container);
Como o componentDidMount é acionado após a renderização do componente, ele renderiza, executa a API e, em seguida, renderiza novamente porque a API alterou o estado de redux. Isso faz com que o componente seja renderizado duas vezes. A primeira vez sem dados e a segunda com bons dados da API.
Existe uma maneira melhor?
Como o componente Child renderiza coisas diferentes com base nos adereços pelos quais é passado, ele mostra brevemente algo diferente na primeira vez em que é renderizado. Então, quando a API atualiza a loja e os componentes são renderizados novamente, mostra algo diferente novamente. É uma cintilação de dois estados diferentes.
Existe uma maneira de torná-lo renderizado apenas uma vez com os dados corretos da API?