Menu
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.
is there a recommended place in the React smart component that the action should be dispatched.
971
model-view-controller. reactjs.
Store − Store is the place where the application state and logic are held. Every store is maintaining a particular state and it will update when needed. View − The view will receive data from the store and re-render the app.
The obvious constructor One obvious place to initialize is the constructor of the component. Similar to the following: class Contacts extends React.
Displaying the loading state in React is very simple. We can do it using the React useState hook, which allows us to track the state of a functional component. If you are interested to learn more about them, check out our previous guide about consuming an API in React using React Hooks.
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.
176
The recommended way is, I believe, to do it in componentDidMount. See this for more info.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
