CODEWITHSUNDEEP
reactjs
stackdave
stackdave

Reputation: 7054

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

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 ?

Upvotes: 15

Views: 8855

Answers (2)

Louis Moore
Louis Moore

Reputation: 625

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.

Upvotes: 1

Joshua Comeau
Joshua Comeau

Reputation: 2753

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}>)

Upvotes: 25

Related Questions