ReactJS - What is difference between component state and class variable?

Question

I think it works differently but I don't know how it works.

1. Using class variable

export default class Test extends Component {
  constructor() {
    this.active = false;
  }

  render() {
    this.active = this.props.name === 'Dan'? true : false;
    return (
      <div>
        {this.active? 'ssup?' : 'noooo'}
      </div>
    );
  }
}

2. Using React component state

export default class Test extends Component {
  constructor() {
    this.state = { active: false };
  }

  render() {
    if(this.props.name === 'Dan') {
      this.setState({active: true});
    }
    return (
      <div>
        {this.active? 'ssup?' : 'noooo'}
      </div>
    );
  }
}

I think it doesn't need to re-render using State if it's only affected by received props.

Answer 1

The difference between the two is that React will re-render your component when state changes (with this.setState(/*...*/)).

If you update the class variable, React will be unaware of it and won't re-render your component.

Note that what you're achieving in your code requires neither state or class variable. You're simply computing another value directly from the props. A better way to write your component would be like this :

export default class Test extends Component {
  render() {
    const active = this.props.name === 'Dan';
    return (
      <div>
        {active? 'ssup?' : 'noooo'}
      </div>
    );
  }
}