I am a newb at React/Redux. Any help would be great. I have a component that makes an API call on ComponentDidMount to get data and then update my Redux store. That component also uses connect to get the Redux state and pass it as props down to a dumb component.
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);
Because componentDidMount triggers after the component renders, it will render, run the api, and then re-render because the api changed the redux state. This makes it so the component renders twice. The first time without any data, and then the second with good data from the api.
Is there a better way?
Since my Child component renders different things based on the props it is passed it briefly shows something different the first time it is rendered. Then when the api updates the store and the components re-render it shows something different again. It is a flicker of two different states.
Is there a way to make it only render once with the correct API data?