CODEWITHSUNDEEP
javascriptreactjs
Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9376

In React, when will the componentDidMount fire for a component that does not directly render markup?

Say for example I have the following three components:

ComponentA: which renders actual markup

ComponentB: which passes some props to ComponentA and renders it

ComponentC: which passes some props to ComponentB and renders it

I understand when the componentDidMount will fire for components that directly output markup (it will fire when the generated markup is appended to the DOM), but what about components that render non-markup components? When does their componentDidMount fire?

In the example above what would be the fire order of the componentDidMount of the 3 components?

Upvotes: 1

Views: 713

Answers (1)

Special Character
Special Character

Reputation: 2359

The components will still call componentDidMount even if they don't explicitly render markup. In your example,

From the react docs:

componentWillMount() is invoked immediately before mounting occurs. It is called before render()...

Even if the component is going to render null, it still has to figure that out after going through the normal lifecycle and it is still 'mounted'. They are still components and behave in the same way. I like to think of every component rendering markup because it has a child that does (or it returns null which does not affect the lifecycle).

The ordering of componentDidMount will be A, B, C with the following:

ex: JSBIN

class A extends React.Component {
  componentDidMount() {
    console.log('A');
  }

  render() {
    return <div>AHHH IT IS A</div>
  }
}

class B extends React.Component {
  componentDidMount() {
    console.log('B');
  }

  render() {
    return <A someProps={'SomeProps'}/>
  }
}

class C extends React.Component {
  componentDidMount() {
    console.log('C');
  }

  render() {
    return <B someProps={'SomeProps'}/>
  }
}

ReactDOM.render(
  <C />,
  document.getElementById('root')
);

Upvotes: 2

Related Questions