reactjs - Will a stateless component re-render if its props have not changed?

Question

One thing I had learned about React is that if the props to a component don’t change, then React doesn’t bother re-rendering the component. Is that true for stateless components too? Or do they behave more like “stupid” functions and get executed every time?

For example, if I had:

import StatelessComponent from '../StatelessComponent';

export default class DocumentsTable extends React.Component {
  state = {
    something: 'foobar',
  };

  render() {
    return (
      <div>
        { this.state.something }
        <StatelessComponent theOnlyProp='baz'>
      </div>
    )
  }
};

When this.state.something updates its value, does <StatelessComponent> get re-rendered? Or is it “smart” enough to see that its props didn’t change, like other React components?

Answer 1

UPDATE 25.10.2018

Since React 16.6, you can use React.memo for functional components to prevent re-render, similarly to PureComponent for class components:

const MyComponent = React.memo((props) => {
  return (
    /* markup */
  );
});

Also, memo does internal optimization.

And unlike a userland memo() higher-order component implementation, the one built into React can be more efficient by avoiding an extra component layer. Blockquote

---

OLD ANSWER

Yes, they always re-render ¹ (unless you use React.memo as explained above) if setState() is called in the component itself or one of its parents, because functional stateless components don't carry a shouldComponentUpdate. In fact, each React component is being re-rendered¹ unless they implement shouldComponentUpdate.

---

Important to note is that calling render() doesn't mean that DOM Nodes are being manipulated in any way. The render method just serves the diff algorithm to decide which DOM Nodes need to really be attached / detached. Note that render() is not expensive, it's the DOM manipulations that are expensive. They are executed only if render() returns different virtual trees.

From React's documentation

Just to be clear, rerender in this context means calling render for all components, it doesn’t mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.

Just don't worry and let render() be called unless your component is huge, then you're better off with stateful Component that implements shouldComponentUpdate().

Look here for an interesting discussion.

¹ means that render() function of the component is called, not that the underlying DOM node is being manipulated.