What are the advantages of stateless components?

It may seem tempting to only use stateful class components and develop a whole application like that. Why would we even bother with stateless functional components? The answer is performance. Stateless functional components can be rendered faster. One of the reasons why this is the case is because stateless functional components do not require some of the life cycle hooks.

What are life cycle hooks? React components have life cycles. This means that they have different stages like mounting, unmounting, and updating. You can hook each stage and even sub stage. Please check the official React documentation to see the full list of available life cycle methods: https://reactjs.org/docs/state-and-lifecycle.html.
These are useful to trigger fetching data from the API or to update the view.

Please note that if you are using React v16 or later, it is not true that functional components are wrapped into class components internally within the React library:

"Functional components in React 16 don't go through the same code path as class components, unlike in the previous version where they were converted to classes and would have the same code path. Class components have additional checks that are required and overhead in creating the instances that simple functions don't have. These are micro-optimizations though and shouldn't make a huge difference in real-world apps – unless your class component is overly complex."

- Dominic Gannaway, engineer on the React core team at Facebook (https://github.com/reactjs/reactjs.org/issues/639#issuecomment-367858928)

Functional components are faster, but in most cases are outperformed by class components extending React.PureComponent:

"Still, to be clear, they don't bail out of rendering like PureComponent does when props are shallowly equal."

- Dan Abramov, co-author of Redux and Create React App, engineer on the React core team at Facebook (https://twitter.com/trueadm/status/916706152976707584)

Functional components are not only more concise, but they usually are also pure functions. We will explore this concept further in Chapter 9, Elements of Functional Programming Patterns. Pure functions provide a lot of benefits, such as a predictable UI and easy tracking of user behavior. The application can be implemented in a certain way to record user actions. Such data helps with debugging and reproducing errors in tests. We will dig into this topic later on in this book.

官术网_书友最值得收藏!

Hands-On Design Patterns with React Native

What are the advantages of stateless components?