componentWillMount is essentially the constructor. You can set instance properties that don't affect render, pull data from a store synchronously and setState with it, and other simple side effect free code you need to run when setting up your component.
It's rarely needed, and not at all with ES6 classes.
Answer from Brigand on Stack OverflowWhat is the difference between componentWillMount and componentDidMount in ReactJS? - Stack Overflow
React 16.3 deprecated componentWillMount and SSR?
componentWillMount alternative?
Recommended Way to Call Method: componentWillMount vs componentDidMount? - react - Meteor Forum
Videos
componentWillMount is essentially the constructor. You can set instance properties that don't affect render, pull data from a store synchronously and setState with it, and other simple side effect free code you need to run when setting up your component.
It's rarely needed, and not at all with ES6 classes.
the constructor method is not the same as componentWillMount.
According to the author of Redux, it is risky to dispatch actions from the constructor because it may result in mutating the state while rendering.
However, dispatching from componentWillMount is just fine.
from github issue:
This happens when dispatch() inside one component's constructor causes a setState() inside another component. React keeps track of the “current owner” for such warnings—and it thinks we're calling setState() inside the constructor when technically constructor causes a setState() inside some other part of the application. I don't think we should handle this—it's just React trying its best do its job. The solution is, as you correctly noted, to dispatch() inside componentWillMount() instead.
I am taking the React course with Maximilian on Udemy. He is a great instructor, but there are few things that are outdated.
I have this HOC, which I use to wrap my components with it to handle errors and display a model.
I am trying to find an alternative for componentWillMount.. I can't use the constructor as I am not allowed to use 'setState' in constructors. It's still working with this approach, It is just that I'm trying not to use the deprecated 'componentWillMount'
(couldn't post a screenshot, here's the code)
const withErrorHandler = (WrappedComponent, axios) => {
return class extends Component {
state = {
error: null,
};
componentWillMount() {
this.reqInterceptor = axios.interceptors.request.use((req) => {
this.setState({ error: null });
return req;
});
this.resInterceptor = axios.interceptors.response.use(
(res) => res,
(error) => {
this.setState({ error: error });
}
);
}
componentWillUnmount() {
axios.interceptors.request.eject(this.reqInterceptor);
axios.interceptors.response.eject(this.resInterceptor);
}
errorConfirmedHandler = () => {
this.setState({ error: null });
};
render() {
return (
<React.Fragment>
<Modal
show={this.state.error}
modalClosed={this.errorConfirmedHandler}
>
{this.state.error ? this.state.error.message : null}
</Modal>
<WrappedComponent {...this.props} />
</React.Fragment>
);
}
};
};