CODEWITHSUNDEEP
reactjs
Henok Tesfaye
Henok Tesfaye

Reputation: 9560

Does re-render of a component create a new instance of its child component?

class Clock extends React.Component {
  render() {
    return (
      <div>
        <MyComponent/>
     </div>
    );
  }
}

Assume that this component re-renders. Does it create a new instance of MyComponent each time it renders?

Upvotes: 2

Views: 2229

Answers (2)

Henok Tesfaye
Henok Tesfaye

Reputation: 9560

No, once the class component created, React didn't create a new instance of it unless the component is unmounted and mount again.

You can check if the constructor is called many times when the parent component renders.

class MyComponent extends Component {
    constructor(props){
        super(props);
        console.log("New instance of MyComponent is created");
    }
}

Upvotes: 3

Aliaksandr Pitkevich
Aliaksandr Pitkevich

Reputation: 834

enter image description here

React compares the current Element tree structure returned from the render() method. React uses the generated keys (or assigned keys) to match each Element to a Component instance. React determines if we have new instances (A.3), removing instances (A.0.1) or are updating existing instances (A, A.0, A.0.0).

If the keys are the same, then React will pass the props to the existing instance, kicking off its Update life cycle. If we have added new Components or changed keys, React will create new instances from the Element data. These new Components then enter the Birth/Mounting phase.

More info

Upvotes: 2

Related Questions