I have a React component, <Profile/>
, for displaying the currently-selected user.
Upon componentDidMount
and componentWillUpdate
, I check the Flux store for a user.
If the user is missing, or if the user exists but its userId
doesn't match the userId
in the url, I call the Flux action getUser(userId)
.
The problem is, this call can be triggered multiple times due to componentWillUpdate
being called multiple times.
My temporary fix is to keep track of pending ajax requests, keyed by userId
, and if one is already underway, I don't issue another.
This feels hacky, though, and I'm wondering if this is a common problem (and recommended solution) or if my architecture needs improvement.
You shouldn't be calling a Flux store in componentWillUpdate
. componentWillUpdate
is for any preparations you need to do before a render. By the time React calls componentWillUpdate
it has already determined that something (props or state) has changed, and that the component should update, so that's not the time for fetching more data.
You should instead be calling the Flux store in componentWillReceiveProps
(assuming the user id is passed as a prop to the component).