8

I am using React-Redux to build an application.

To load initial data for a React smart component, I need to dispatch a Redux action where the server data requests will happen.

I've tried dispatching the action in constructor (ES6 implementation), componentWillMount, and componenetDidMount. They all worked.

My question is:

is there a recommended place in the React smart component that the action should be dispatched.

vsync
  • 118,978
  • 58
  • 307
  • 400
Jane
  • 621
  • 1
  • 6
  • 10

2 Answers2

8

Edit: Dan Abramov recently stated

In future versions of React we expect that componentWillMount will fire more than once in some cases, so you should use componentDidMount for network requests.

In componentDidMount

Read here.

Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.

When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted.

Documentation is really scarce on "why in componentDidMount". I believe componentWillMount is not called if you use server-side render, so this could be a reason why componentDidMount is preferred.

Community
  • 1
  • 1
Lyubomir
  • 19,615
  • 6
  • 55
  • 69
  • Yeah. I've read the doc you mentioned. But trying to understand why in componentDidMount? Since the dispatch action in other places also worked. – Jane Sep 21 '16 at 15:27
  • I believe componentDidMount is used for side effects such as async actions or mutating DOM directly, but couldn't find the exact source at the moment.. See my updated answer. – Lyubomir Sep 21 '16 at 15:29
1

The recommended way is, I believe, to do it in componentDidMount. See this for more info.

Horia Coman
  • 8,681
  • 2
  • 23
  • 25