What else does the React.Component class provide?

Question

In the context of this exercise, what else does the React.Component class provide?

Answer

The React.Component class provides several methods in addition to render(), some of which are automatically invoked through the lifecycle of the component.

The constructor() method is invoked by the component before it is added to the DOM. This is usually used to run code to set up the component such as initializing some state and binding methods to the component.

The class also provides a componentDidMount() method which is run right after the component is inserted into the DOM tree, and is invoked only one time.

Another method is componentDidUpdate(), which runs immediately after any updates to the component occurs. This is typically used for code such as network requests which should be run if any updates occur to the component.

14 Likes

Is React.Component method a Super Class ? that we extends it with name of MyComponentClass as a child calss ? I can see render() as alternative to constructor method while dealing with supercalss and class why it is named render instead of constructor? , what is this ? I’m confused trying to relate it . why render() takes no arguments and why we didn’t make an object out of class we made with superClass React.component ? how return works here ?

6 Likes

If ‘render’ method is already defined inside the React.Component then why do we have to define it in the class which inherits from it?

I think, it’s not a definition, but a call??

Yeah, at first it looks like a call, but as it turns out, it actually isn’t:

The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional.
React.Component

You like give the render() method a meaning. The only thing that confuses me, is that why is there no function keyword used? Is the function like… declared during creation of the React.Component class and then later we redefine it? Is it possible? I didn’t find any relevant information on that. I am fairly new to programming myself and do not understand everything yet.
I found the answer to my question: the syntax comes from JavaScript basic class syntax:

class MyClass {
  // class methods
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

JavaScript Classes](JavaScript Classes)
https://javascript.info/class

I guess my JavaScript knowledge needs improving :flushed:

2 Likes

If you are defining a method in your child class that already exists in the parent then you are either overriding, or overloading the method in the parent class depending on whether or not it takes the same arguments.

Method overriding allows you to create objects that are all related and have the same method, but may do different things when you call that method.

For example if you are creating a game and have a parent class called Monster, you can create multiple child classes for each type of monster that you would like to have in the game. If you override a method in the parent class in each child class, then you could put all of your monster objects into an array and then loop through the array calling that method in the object. Each monster would then do something different when you called that method, depending on what type of monster it is.