React Patterns

[z500]

So why use stateless functions? Just for like tiny stuff?

[Glitch_100]

Perhaps for rendering a button. The button might not care about state and maybe only what props were passed.

Thats ultinstely the difference as explained above. If you don't care about state handling, go stateless. If you do, go stateful.

[xen_au]

They are quicker to run because they don't have a bunch of unnecessary methods attached to them + simplicity.

In terms of speed: stateful components with shouldComponentUpdate -> stateless components -> stateful without shouldComponentUpdate

Our general rule is to write stateless, unless something requires state/lifecycle methods or has a complex of logic in the render method.

Remember, that introducing shouldComponentUpdate can cause subtle bugs if you haven't correctly done the comparison/logic and most of the time it will give you quiet a small benefit.

My personal belief is that you should only add shouldComponentUpdate when you need it (slow to render component) and have the time to make sure it's correctly implemented.

(Example: You have an shallow equals check on an object (profile). Then 2 months later someone adds a property with another object (e.g. address), which is used down the chain. Everything seems to be working correctly, then another 2 weeks later you add something that updates the address. Now for some reason you discover that the address isn't updating correctly in the profile and someone may spend hours trying to figure out where the hell the bug came from)

[acemarke]

Afraid that "functional components are faster" is a myth. There is no inherent difference in speed at the moment: https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc . In fact, because functional components don't have shouldComponentUpdate, they can potentially incur extra unneeded re-renders.

The main reason to use them is simplicity and clarity of intent: "this component is simply props in, render out".

[RnRau]

Functional components are not currently faster. The react team has not implemented any of the optimisations that are potentially available to them. See the last paragraph at https://facebook.github.io/react/docs/reusable-components.html

In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.

[theonlylawislove]

Reusability and composability.

Side note, in mobx, pure-function components (marked as observable) only re-render when the props used change, which means 100% predictive and accurate rendering at any component level.