What is the difference between using a stateless functional component and a method call?

Question

I am trying to understand stateless components and what is the difference between these examples:

class App { render() { return ( <div> {this.renderAFunction('hello')} </div> ); } renderAFunction(text) { return ( <p>{text}</p> ); } } 

and this:

 class App { render() { return( <div> <RenderAFunction text='hello'/> </div> ); } } const RenderAFunction = ({text}) => ( <p>{text}</p> ); 

Or if there is any difference?

Answer 1

Functionally, there is no difference. Both end up creating a paragraph element, but there are other aspects to consider. There are three points that need to be done (in my opinion) when studying both methods:

• Reuse . You need to understand to separate components when you need to. If renderAFunction intended only to generate some JSX, based, for example, on an API request, then it works fine in the method. But if you want to reuse it somewhere else, then split it into your own component. A huge part of React is the ability to reuse components and get rid of code duplication. Separating a method into its own component would be necessary for this.
• Purpose . There are reasons to use stateless function components and reasons not to. The whole point of stateless functional components is to have no state and be presentational. If you need to do something related to the React life cycle or internal state, save it as a method or a new class depending on whether you want to reuse it.
• Performance . Using a stateless functional component will be less effective. This is because it is a component, not just some JSX returned by the method. At the moment, the React team plans to make some optimizations for stateless functional components, because they are stateless and just presentational, but this probably will not happen until React Fiber and therefore your functional component are executed without state will not optimize compared to the usual full-fledged component of the class. This makes it incredibly inefficient compared to the method that returns some JSX, especially if it is just used once in another component.

A good rule of thumb is to ask yourself if I need it elsewhere? If not, save it in the method. If you no longer need this, splitting JSX into a separate component will have worse performance and will not follow the basic principles of React.

If you need it somewhere else, separate the component to follow the concept of React reactability.

Answer 2

Your App's render function will be translated to the following JS code for your first example:

 render() { return React.createElement( 'div', null, this.renderAFunction('hello') ); } 

And the following for the second:

 render() { return React.createElement( 'div', null, React.createElement(RenderAFunction, { text: 'hello' }) ); } 

While both of them look almost the same, there is one significant difference: laziness . React will execute the RenderAFunction body only if it is installed in the DOM hierarchy.

Slightly your business, but in the following example:

 const LazyApp = () => { const heavy = <div><HeavyStuff /></div> // ... return <div>done it</div> } const HardWorkingApp = () => { const heavy = <div>{HeavyStuff()}</div> // ... return <div>done it</div> } const HeavyStuff = () => { // ... do heavy rendering here } 

The Lazy app will not do any heavy stuff at all. Maybe this is not very clear from this synthetic example, why at all something like this could be done. But there are examples of the real world when something conceptually similar happens (creating Components without rendering them).

Answer 3

In principle, both will serve the same purpose. But the real advantage of creating a component is its reuse.

If you need to display this jsx piece only for this component. Then there is no need to create a separate component.