Change detection with react

Question

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

When props are changed in a react component, this component 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 component 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 ?

Answer 1

Try to imagine there are 2 things here:

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

A change inside the COMPONENT

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

A change from the OUTSIDE

This would trigger the props/newProps of this COMPONENT to be updated, and subsequently your component is updated by calling this.setState() inside the component (componentWillReceiveProps 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
  componentWillReceiveProps(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().