score:62
componentDidMount is for side effects. Adding event listeners, AJAX, mutating the DOM, etc.
componentWillMount is rarely useful; especially if you care about server side rendering (adding event listeners causes errors and leaks, and lots of other stuff that can go wrong).
There is talk about removing componentWillMount from class components since it serves the same purpose as the constructor. It will remain on createClass components.
score:3
According to documentation setting the state in componentWillMount will no trigger a re-rendering.
If the AJAX call is not blocking and you return a Promise that update the component's state on success, there are chances that the response arrives once the component has been rendered.
As componentWillMount doesn't trigger a re-render you won't have the behaviour you expected which is the component being rendered with the requested data.
If you use any of the flux libraries and the data requested end up in the store the component is connected to (or inherit from a connected component) this won't be an issue as the reception of that data will, most likely, change props eventually.
score:36
I had the same issue at the beginning, too. I decided to give a try making requests in componentWillMount but it end up in various small issues.
I was triggering rendering when ajax call finishes with new data. At some point rendering of component took more time than getting response from server and at this point ajax callback was triggering render on unmounted component. This is kind of edge case but there is probably more, so it's safer to stick to componentDidMount.
Source: stackoverflow.com
Related Query
- Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
- Why does calling react setState method not mutate the state immediately?
- Why is `Promise.then` called twice in a React component but not the console.log?
- Why ajax request should be done in componentDidMount in React components?
- Why does my Animated view not stay in the correct place in React Native?
- Why is clearTimeout not clearing the timeout in this react component?
- Ajax is not setting the headers - React with TS
- Why is my React checkbox onChange handler firing on render and then not when the box is clicked?
- Why is componentDidMount the best place to fire AJAX request
- React + Redux - Why not connect all the components?
- Why does react call render function if I have not changed the reference of the state?
- React componentDidMount not updating the state
- Why is this variable from the Redux store not in the `this.props` on React page?
- What is the benefit of having $sce or Strict Contextual Escaping in angularjs and why react does not need to do it?
- Why does my React app append the external URL to http://localhost:/<port> and not to ONLY the URL itself?
- Why is react state(array) empty inside callback function? Why is it not using the updated value from outer scope?
- Why is the state not updating inside this react Hooks component?
- Why is my react Table not updating the data?
- Why CSS file is not loaded in the react app
- Why does setState Hook from React is rendering twice even not changing the state?
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- Why the UI component of the react is not getting updated?
- Why does the jest mock function not getting executed in my test with react testing library?
- Why is my hook variable in React not holding the state I set it to?
- Why can NGINX not load my react app with the right css & js files
- Why does my react app go to the custom 404 not found page when the link is clicked?
- Why is jest not able to provide the useTranslation hook to a custom React hook I'm testing?
- why does it not update the sql row in the react web application?
- Why is my text not changing as I'm writing text to the input tag in React
- Why React component is not update when the props passed to it changes?
More Query from same tag
- React grid table with double sorting in specific columns
- Can't access this.state in other function
- Access methods coming from props inside map function
- React.PropTypes.number float with min and max
- Is there any way to show the Select MenuItems from specific position at first dropdown?
- How can I realize "find" with using "$in" by two parameters in mangoose?
- Map over data returned from aws-sdk on React
- React form validation - callbacks not events
- Having problem: this.setState is not a function
- Passing filter attributes to parent component
- In react js this.state getting state of null in function
- Why JSON.parse(JSON.stringify(obj)) removes a property of obj
- How to get updated state value in React useEffect hook
- Promise keeps pending and "then" or "catch" are not triggering. ReactJS
- How to mock third-party library custom events with jest and react testing library
- React useEffect looping many times when fetching data and setState using fetch API
- React Typescripted Higher order component loses generic prop type of the passed component
- Updating a react component from a completely separate component
- React pass fetched data from API to another component
- change switch main path according to api
- Change the Stripe Pay Button to An Image in Reactjs
- Error when use tabIndex in Autocomplete of MUI
- React-leaflet center of an array of positions
- How to solve Type Property '' does not exist on type 'IntrinsicAttributes & Function'?
- How to display events from "selectable" multiple calendars using FullCalendar React?
- How to insert variable in `validationSchema` Formik and Yup?
- Testing different fonts in a React project
- Delete a specific string in a `react` array
- Using react-web-tabs, is there a way to switch tabs AND navigate to hashed ID via click?
- Toggle ascending and Toggle descending in React Hooks
