class extends React.Component vs React.createClass() about mantra

[arunoda]

• Use stateless components as possible as you can
• Use React.Component if you can't (specially when we've event handlers)
• Avoid React.createClass()

[arunoda]

I hope we can close this.

[nadeemja]

Apologies for re-opening this old thread.
However, I've got some troubles related to the topic.

In short, I'm trying to implement a simple dialog from the Material-UI library.
Link: http://www.material-ui.com/#/components/dialog

1. If I use stateless components, then I have to store state in LocalState. Which is OK, but whenever I change anything in LocalState, everything re-renders. Even with only a few elements - 4 to be exact, this is noticeably slower. Also, using this approach becomes a nightmare when trying to use react-storybook.
2. If I use React.Component, then either there are parse errors from official examples, or this.setState() is undefined if I use constructor(). I've googled all the relevant errors, and applied all the suggested fixes (using .bind() et. al), to no avail.
3. If I use React.createClass, then everything works! There are no multiple re-renders nor laggy-interface. Using it with react-storybook is a dream. It just works.

So, I have to ask, @arunoda:

1. Why should I avoid React.createClass?
2. How would you implement the state management needed for the element from Material-UI?

I'm a beginner and I'm sincerely eager to learn.
Thanks for all your hard work.
Really looking forward to your answer.

Regards,

Nadeeem

[achtan]

here is a simple example of React.Component :

class Checkbox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: props.defaultValue,
    };

    this.handleValuesChange = this.handleValuesChange.bind(this);
  }

  handleValuesChange() {
    const state = {
      checked: !this.state.checked,
    };
    this.setState(state);
    this.props.onChange(state);
  }

  render() {
    return <div>
      <label>
        <input type="checkbox" onChange={this.handleValuesChange} checked={this.state.checked}/> email
      </label>
    </div>;
  }
}