react, differences between component create with extend class and simple const = function

Question

In react tutorial:

https://egghead.io/lessons/javascript-redux-react-todo-list-example-filtering-todos

there is main component create with extends:

class TodoApp extends Component {
  render() {
    const visibleTodos = getVisibleTodos(
      this.props.todos,
      this.props.visibilityFilter
    );
    .
    . // Input and Button stuff
    .

and another components just create like a const that hold a function:

const FilterLink = ({
  filter,
  children
}) => {
  return (
    <a href='#'
       onClick={e => {
         e.preventDefault();
         store.dispatch({
           type: 'SET_VISIBILITY_FILTER',
           filter
         });
       }}
    >
      {children}
    </a>
  )
}

the difference i see, first created with class use a render function, and the another a return function to send back the template.

What are the differences? I've heard components in the future only will be allowed with extend Component ?

thanks i've just read: 'These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods' but it's not yet clear for me when to choose it — stackdave
– stackdave, Commented Sep 20, 2016 at 10:16
I guess the general idea is to go for the simpler stateless option when you don't need all of the extra stuff. — Tom Fenech
– Tom Fenech, Commented Sep 20, 2016 at 10:19

Community · Accepted Answer · 2017-05-23 11:47:31Z

25

See: React.createClass vs. ES6 arrow function

The short answer is that you want to use Stateless Functional Components (SFC) as often as you can; the majority of your components should be SFC's.

Use the traditional Component class when:

You need local state (this.setState)
You need a lifecycle hook (componentWillMount, componentDidUpdate, etc)
You need to access backing instances via refs (eg. <div ref={elem => this.elem = elem}>)

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Sep 20, 2016 at 10:33

Joshua Comeau

2,77327 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Louis Moore · Accepted Answer · 2018-07-10 05:43:27Z

1

class Foo extends Component {} results in components with some React lifecycle hooks, while const Foo = (props) => {} does not. The latter should therefore result in more performant code and would be considered a "stateless" or "pure" component, as it doesn't come with any additional baggage.

edited Jul 10, 2018 at 5:43

answered May 23, 2017 at 6:23

Louis Moore

6356 silver badges6 bronze badges

Collectives™ on Stack Overflow

react, differences between component create with extend class and simple const = function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related