Multiple action dispatches breaking API fetch request in redux app - sockets

Question

I am building an app where I fetch data from a stock market api based on the tickers. I am using redux on the server and react+redux on the client and using sockets.io to communicate between the two.
The way I have set up the app is that, initially the state just gets populated with the list of tickers. No data is fetched regarding each ticker from the API. On the client side, whenever there is a state event emitted (which is emitted every time a new user connects to the socket), the following code on the client side dispatches an action
socket.on('state', state => {
store.dispatch({
type: 'SET_TICKERS',
state
});
});
Now, to actually fetch the data from the server side, I am dispatching an action from inside a component lifecycle hook on the client side
class StockList extends Component {
constructor(props){
super(props);
this.renderButton = this.renderButton.bind(this);
}
renderButton(stock){
return(
<button key={stock} type='button' className='btn btn-primary stock-btn'>
{stock}
<span className='glyphicon glyphicon-remove' aria-hidden='true'
onClick={() => this.props.onClick(stock)}></span>
</button>
)
}
render() {
if(this.props.stocks){
return (
<div>
{this.props.stocks.map(stock => {
return this.renderButton(stock);
})}
</div>
)
}else{
return(
<div>Loading...</div>
)
}
}
componentDidUpdate() {
console.log('The component did update');
console.log(this.props.stocks.toJS());
this.props.fillState(this.props.currentState);
}
}
I make the call from inside the componentDidUpdate function. This updates immediately after the state has been set with the list of tickers. However, the issue is that the componentDidUpdate lifecycle hook sends out far too many action requests, causing the api to crash. Why is this happening? Am I creating an infinite loop by sending out a dispatch from inside componentDidUpdate? Will throttling fix this?

Answer 1

I suppose executing this.props.fillState(this.props.currentState) updates parent component state, which cause parent render() method execution, so your component receives new props, which fire componentWillReceiveProps() method, which leads to componentDidUpdate() execution, so yeah - you created some kind of infinite loop.
To avoid that - you can use shouldComponentUpdate() method or change data flow of your component tree - I can tell that if pass currentState object and fillState function by props, you can as well fire this function and parent component (or use observer design pattern if you want child component to take part in this process).
I recommend you to read more about react component lifecycle