React create class confusion with extends Components

Question

I used to do React.createClass but since I heard it's faster with extends component and since I start to play with babel now, I would like to convert stateless legacy component with the newer style.

I have this

const Main = React.createClass({
   render(){
      return(<h1>my title</h1>)
   }
})

so what's the 'newer' syntax for above code?

is it like this?

const Main = () => { 
   render(){
       return(<h1>my title</h1>)
   }
}

Then when to use React.component?

class Main extends React.Components() {
   render(){ return(<h1>something</h1>}
}

Answer 1

There is not performance difference between using

const Main = () => { 

       return(<h1>my title</h1>)

}

or

class Main extends React.Component {
   render(){ return(<h1>something</h1>}
}

given they receive the same props, however the react creators suggest that performance improvements will be made in future. So in short,

Use the first approach, which is a functional component approach when your component only takes in props and renders the result. However use the ES6 class based approach, when your React component has more functionality and handles states.

In your case you are just rendering the component so a functional component approach will be best suited for you

Answer 2

Both of your example is correct. Just that the extends Component should be without s and need to import React, { Component } from 'react'; at the top.

const Main = () => { 
    return(<h1>my title</h1>)
}

You generally want to use the above example when it is does not need any lifecycle methods. This are refer to as Pure component that will always behave the same when given the same props. It also does not keep state.

class Main extends React.Component() {
  componentWillMount() {
    console.log("I can be not pure");
  }

  render(){ return(<h1>something</h1>}
}

The above are Component that could manage state and use lifecycle methods.

Usually to decide what to use, I always start with a pure component. When continue developing, I discover that I have to use state or lifecycle methods, I would then turn it to a component.