When does the constructor method get called?

Question

In the context of this exercise, when does the constructor method get called?

Answer

The constructor method is invoked when a new component instance is created and runs before the entire component’s lifecycle starts. It runs before componentWillMount, which is the start of the mounting phase of the component.

9 Likes

I haven’t seen creating instances of the component classes in the codecademy exercies, its always been render the class component, then when are they being called ? Please explain.

its explained here:

https://reactjs.org/docs/react-component.html#mounting

which contains the following explanation: These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

i wouldn’t call it a problem, but react does a lot of stuff under the hood (under water if you like), including creating the class instance.

if you want to learn more about classes and creating class instances, i would do this in pure JS to improve your understanding of classes, so you can better “see” how react might do this.

8 Likes

I’d like to share with anyone new to React that the method presented in said exercise is considered unsafe (as in more likely to have bugs) and no longer recommended.

10 Likes

Thanks Carlo!

It’s very helpful to have up to date info being put into the forums.

Could you possibly add a use case scenario for alternatives we could use in this particular exercise? Or does anyone have one?

I’m reviewing the React documentation, but before proceeding with the codecademy course and learning how componentWillMount is/was used, I would be happy to know about any better alternatives that are more current.

Thank you.

1 Like

Hi! I’m also learning so, for now, I can’t share too much from my personal experience. However, I found this blog article with a few use case recommendations I believe you might find interesting.

Best regards.

1 Like

Thanks for the heads up Carlo!

All the best for your future studies.

1 Like

Carlo, good call.

Hey codecademy, why is componentWillMount() still being taught in this lesson without this caveat that it’s deprecated?

4 Likes

Hi,

From version 16.3 React has introduced two new lifecycles getDerivedStateFromProps and getSnapshotBeforeUpdate These two in combination with other lifecycles will help in fulfilling the functionalities which the UNSAFE lifecycles provided.

Some examples for this migration from legacy lifecycle to new lifecycle are present at

Examples

1 Like

From what you linked, what seems to be “unsafe” is the componentWillMount() method, and the componentWillUpdate() method. Not the componentDidMount() and componentDidUpdate()

Did the lesson get updated, or are the methods taught in the lesson still unsafe? If they are unsafe, what are the alternatives? I still don’t really understand the getDerivedStateFromProps() and getSnapshotBeforeUpdate() methods

Hello there!

React 16.8 includes a new kind of functions called “Hooks”, to help you manage component states and behaviour. Its documentation says:

The Effect Hook, useEffect , adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount , componentDidUpdate , and componentWillUnmount in React classes, but unified into a single API.

1 Like

if the render() is called before the componentDidMount() how is the the date in the quoted exercise rendered. I would assume it wont render because render had already been called without that particular info.