stackdave stackdave - 10 months ago 46
React JSX Question

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

In react tutorial:

there is main component create with extends:

class TodoApp extends Component {
render() {
const visibleTodos = getVisibleTodos(
. // Input and Button stuff

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

const FilterLink = ({
}) => {
return (
<a href='#'
onClick={e => {

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 ?

Answer Source

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