Consider the following React code:

class Todos extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item: 'Test', };
  }

  render() {
    return <TodoItem item={this.state.item} />
  }
}


class TodoItem extends React.PureComponent {
  render() {
    return <div>{this.props.item}</div>
  }
}


function TodoItem(props) {
  return <div>{props.item}</div>
}

Above there is a stateful parent ponent Todos and 2 versions of the same child ponent TodoItem. One of the versions is a pure ponent and the other is a stateless functional ponent.

I understand the performance benefits from using a PureComponent, but I am wondering if React 16 applies the same shallow parison and performance benefits to a stateless functional ponent?

If not then why? It seems that by using either I am telling React my ponent has no state and therefore will only update if the parent ponent's state changes.

Consider the following React code:

class Todos extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item: 'Test', };
  }

  render() {
    return <TodoItem item={this.state.item} />
  }
}


class TodoItem extends React.PureComponent {
  render() {
    return <div>{this.props.item}</div>
  }
}


function TodoItem(props) {
  return <div>{props.item}</div>
}

Above there is a stateful parent ponent Todos and 2 versions of the same child ponent TodoItem. One of the versions is a pure ponent and the other is a stateless functional ponent.

I understand the performance benefits from using a PureComponent, but I am wondering if React 16 applies the same shallow parison and performance benefits to a stateless functional ponent?

If not then why? It seems that by using either I am telling React my ponent has no state and therefore will only update if the parent ponent's state changes.

• javascript
• reactjs

Share Improve this question Follow edited Mar 19, 2018 at 8:51 CaribouCode asked Mar 18, 2018 at 22:18 CaribouCodeCaribouCode 14.4k3333 gold badges111111 silver badges185185 bronze badges 4

• 1 stateless ponents do not apply React rendering life-cycle. It doesn't have state, and always re-render when receives new props. So the answer is that stateless ponent always faster, unless you don't want to trigger the render function (eg: the ponent is outside window) – FisNaN Commented Mar 18, 2018 at 22:25
• 1 @FisNaN just to clarify are you saying the stateless functional ponent is faster than a PureComponent which only does a shallow pare on ining props? Does the functionality ponent always re-render even if there's no difference because it maybe doesn't do a shallow parison? Or does it now with React 16? – CaribouCode Commented Mar 18, 2018 at 22:29
• Please consider this example: codesandbox.io/s/2zoq5pw4r0 Yes stateless ponent always updating when receive different props (even with same value). However because it doesn't have the parison, it slightly faster. That's why input normally uses stateless. List item normally uses PureComponent. – FisNaN Commented Mar 18, 2018 at 23:03
• 1 @FisNaN I don't understand why a functional ponent would be faster if it triggers all of it's logic and rendering everytime with no need. Surely the shallow pare for PureComponent would be faster because it would not result in all of the functionality triggering, or a render? – CaribouCode Commented Mar 19, 2018 at 9:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I understand the performance benefits from using a PureComponent, but I am wondering if React 16 applies the same shallow parison and performance benefits to a stateless functional ponent?

No, not yet. There were indications from the React team this will change in the future, but as of today, stateless functional ponents still behave like React.Component in regards to rerendering.

If you need to optimize for performance, stick with React.PureComponent or React.Component implementing shouldComponentUpdate. Keep in mind that if you're using redux and react-redux, connect() will try to handle the shallow pares for you as well on both functional and class-based ponents (read up on in in the docs). You might also want to check out repose and its onlyUpdateForKeys helper, for example.

It really depends on how you call your pure ponent in JSX. When using mounting (as in your snippet) it don't get you a lot of optimization. @Dominik and folks in ments to question describe why. But here guy states that calling pure ponents as functions can result in 45% speed up. Todos ponent will look like this:

class Todos extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item: 'Test', };
  }

  render() {
    return TodoItem({ item: this.state.item });
  }
}