2

I know the difference between stateless and statefull components in react application. I want to know what is the efficient way to use stateless and statefull components together. Is there any performance benefit of using the one over the other in any particular situation

Vikas Sardana
  • 1,593
  • 2
  • 18
  • 37
  • 2
    In addition to @MayankShukla comment, here's another post you might find interesting - a write-up I did a while ago: http://stackoverflow.com/questions/37170809/react-createclass-vs-es6-arrow-function/37170998#37170998. – Chris May 03 '17 at 13:16
  • @Chris that is really awesome i think you should add that to DOC so that it will be easily available :) – Mayank Shukla May 03 '17 at 13:21
  • 2
    Also check this link, it has very useful information regarding types of react components and when to use which. http://stackoverflow.com/questions/40703675/react-functional-stateless-component-purecomponent-component-what-are-the-dif – Moe May 03 '17 at 13:22

2 Answers2

6

You should default to using stateless components. Since they use no state, it's very easy to tell when a component should be re-rendered, since they will display the same thing if their props do not change.

You should use stateful components when you need to use setState or when you need to use lifecycle hooks.

In theory there could be performance benefits for using stateless components due to the fact they are pure functions (or should be pure functions), but I don't have any hard numbers for that.

Dan
  • 10,282
  • 2
  • 37
  • 64
  • 1
    Caveat: Since stateless components can themselves be non-pure (example: render current time) or they render non-pure components as children and there's currently no way to indicate that a stateless component is actually pure, React is forced to re-render them even if their props have not changed. In theory stateless components could even be slower than regular components, but I also don't have any hard numbers. – Brandon May 03 '17 at 13:38
2

Class Components

Class components (that have state) can be used when you want to store some local data inside a component. For eg - 

import React from 'react'

function handleInc (state, props) {
  return {
    count: state.count + 1
  }
}

class App extends React.Component {
  state = {
    count: 0
  }

  handleClick = () => {
    this.setState(handleInc);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Increase</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

These components are also called smart containers or components because they hold all the logic for modifying the UI based on the state (Redux pattern).

Functional Components or Stateless Components

Functional components have no state or any local data. These components can be used to update some UI by passing down the props from the parent component.

<Child data={this.state.count} />

Functional components have their own advantages like :

  • They are easy to test.

  • They are easy to understand.

  • Performance

  • No worries about the this keyword.

If anything more, refer to this article.

Nitin Tulswani
  • 309
  • 3
  • 5