I'm studying change detection mechanism and I'm having some troubles with reactjs case.

When props are changed in a react ponent, this ponent is "rerendered" (not totally true, because of the diff algorithm, but the idea is here) .

I know that when something happens, react browse its internal virtual DOM to check if the new value is the same as the previous one, and rerender as needed its real ponent tree.

My question is : what is this something.

For example, using angular 2, we have zone.js that allows to catch async stuff (button click, setTimeout etc...) and to trigger change detection.

But for now, I don't know at all of it's triggered with reactjs.

Can you help me ?

I'm studying change detection mechanism and I'm having some troubles with reactjs case.

When props are changed in a react ponent, this ponent is "rerendered" (not totally true, because of the diff algorithm, but the idea is here) .

I know that when something happens, react browse its internal virtual DOM to check if the new value is the same as the previous one, and rerender as needed its real ponent tree.

My question is : what is this something.

For example, using angular 2, we have zone.js that allows to catch async stuff (button click, setTimeout etc...) and to trigger change detection.

But for now, I don't know at all of it's triggered with reactjs.

Can you help me ?

• javascript
• reactjs

• 2 I think it's all explained here. – robertklep Commented Aug 16, 2016 at 7:36

2 Answers 2

Try to imagine there are 2 things here:

• the ponent (COMPONENT) itself, and
• things outside of the ponent (OUTSIDE):

A change inside the COMPONENT

You need to call this.setState(), this would update the state inside the current ponent, and subsequently trigger an update (automatically call render()) of this ponent

A change from the OUTSIDE

This would trigger the props/newProps of this COMPONENT to be updated, and subsequently your ponent is updated by calling this.setState() inside the ponent (ponentWillReceiveProps is a lifecycle method from React)

class MyComponent extends React.Component {
  // initially how the state is set to MyComponent
  constructor(props) {
    super(props);
    this.state = {name: this.props.name};
  }

  // own method to be called inside MyComponent
  updateName(e) {
    const newName = e.target.value;
    if (this.state.name !== newName) {
      this.setState({name:newName});
    }
  }

  // changes from the outside
  ponentWillReceiveProps(nextProps) {
    const newName = nextProps.name;
    if (this.state.name !== newName) {
      this.setState({name:newName});
    }
  }

  render() {
    return(
      <div>
        {this.state.name}
        <input type="text" 
               onChange={this.updateName.bind(this)} 
               value={this.state.name} />
      </div>
    )
  }
}

It's worth pointing out that this.setState() would automatically trigger render(), while this.state.name = 'Bob' wouldn't trigger render().

You said

when something happens, react browse its internal virtual DOM

that something is when a new prop is being passed or if a state gets changed. Are you asking for how react internally knows when either of these happen?