What is a stateless functional component

Respond Functional Stateless Component, PureComponent, Component; What are the differences and when should we use what?

How do you decide, how do you choose between these three options, depending on the purpose / size / props / behavior of our components?

Extending from or from with a custom method has performance implications. Using stateless functional components is an "architectural" choice and does not (yet) offer any performance benefits.

  • For simple display components that simply need to be reused, prefer stateless functional components. This way you can be sure that they are decoupled from the actual app logic, that they are easy to test and that they do not have any unexpected side effects. The exception is if you are for some reason a lot of them or if you really need to tweak your rendering method (since you cannot define for a stateless functional component).

  • Expand if you know your output depends on simple props / states ("simple" means no nested data structures as PureComponent does a flat comparison) AND you need some performance improvements.

  • Expand and implement your own if you need some performance improvements by running custom comparison logic between next / current props and status. For example, you can quickly do a deep comparison using lodash # isEqual:

Implementing or extending are also optimizations. As usual, you should only check this if you are having performance issues (avoid tweaking ahead of time). As a rule of thumb, I always try to make these tweaks after the application is in working state and most of the functionality has already been implemented. It's much easier to focus on performance issues when they actually get in the way.

More details

Functionless stateless components:

These are only defined via a function. Since there is no internal state for a stateless component, the output (what is rendered) depends only on the props given as input to that function.

Pros:

  • Easiest way to define a component in React. If you don't need to manage a state, why bother with classes and inheritance? One of the main differences between a function and a class is that with the function you are certain that the output depends only on the input (not on the history of previous executions).

  • Ideally, you should use as many stateless components as possible in your app, as this usually means that you've moved your logic out of view and moved it into some sort of "redux". This means that you can test your real-world logic without rendering anything (much easier to test, reusable, etc.).

Disadvantage:

  • No life cycle methods. You have no way of defining and other friends. Typically, you do this in a parent that is higher in the hierarchy so that you can convert all of the children to stateless elements.

  • There is no way to manually control when it needs to be re-rendered because you cannot define it. It will be re-rendered every time the component receives new props (no way to compare flat planes, etc.). In the future, React could automatically optimize stateless components. Some libraries can currently be used. Since stateless components are just functions, it is basically the classic problem of "function memory".

  • Refs are not supported: https://github.com/facebook/react/issues/4936

A component that extends the PureComponent class VS A normal component that extends the Component class:

React used to have one that you can attach to a class defined with syntax. The mixin would simply define one that does a flat comparison between the next supports and the next state to see if anything has changed there. If nothing changes, no replay is necessary.

If you want to use the ES6 syntax, you cannot use mixins. To make things easier, React introduced a class that you can inherit from instead of using. implemented just like. It's mostly a convenient thing that you don't have to implement it yourself, as a flat comparison between current / next status and props is probably the most common scenario that can give you quick gains in performance.

Example:

As you can see, the output depends on and. If you are rendering in a parent with the same props, React will call every time, even if the output is exactly the same. Remember that React implements dom diffing so that the DOM is not updated. However, doing dome diffing can be expensive, so it would be a waste in this scenario.

If the component expands instead, a flat comparison is performed. And because props and nextprops are the same, there is no call at all.Notes on the definition of "pure" in React:.

In general, a "pure function" is a function that always evaluates the same result for the same input. The output (for React is what is returned by the method) does not depend on the history / status and has no side effects (operations that change the "world" outside the function).

In React, stateless components as defined above are not necessarily pure components if you call "stateless" a component that never calls and does not use any.

In fact, in one of the life cycle methods, you can still experience side effects. For example, you can send an Ajax request in or do a DOM calculation to dynamically adjust the height of a div in.

The definition of "stupid components" has a "more practical" meaning (at least in my understanding): A stupid component "gets" informed about props from a parent and doesn't know how to do it, but uses props to call back.

Example of an "intelligent":

In the end I would say that "dumb", "stateless" and "pure" are quite different concepts that can sometimes overlap, but not necessarily, depending mostly on your use case.