Use React Stateless Functional Component when you don’t need to manage states in a component.
React Stateless Functional Component with TypeScript
Takahiro Ikeuchi
174

Be careful with this statement. SFCs look great on the first look because they are fast to write, but they have one big flaw people often overlook when they are first confronted with them: They re-render. Always.

This means, that if you have a SFC somewhere in the middle of your component tree (For example a row in a data grid, which has cells as its children) then a re-render of the SFC element’s parent will always re-render the SFC element as well. This can lead to performance issues, because React updates elements which don’t need an update.

Imagine you have an app consisting only of SFC elements except for a stateful element at the root. When the root re-renders, every single element in the app will re-render as well, even though it isn’t necessary.

I have thus set myself 2 rules:

  1. Use SFCs only in leaves (elements at the very bottom of the element tree). They should do nothing but render actual HTML elements, no other custom component elements.
  2. Use PureComponent for everything else.

Another option would be to define a HoC which wraps any component inside a PureComponent, this would allow you to use the concise syntax of SFCs and still retain the performance benefit of PureComponent. But since IDE offer code templates, I just use them to create a PureComponent with a few keystrokes.

Show your support

Clapping shows how much you appreciated Sebastian K’s story.