functional_vs_class.js

/* Functional */
// Version free

// Bad practice
export default function FunctionalComponent(props) {
  return <h1>Hello, {props.name}</h1>
}

// Good practice
export default const FunctionalComponent = (props) => <h1>Hello, {props.name}</h1>

// Excellent practice
export defaut (props) => <h1>Hello, {props.name}</h1>

/* --------------------- */

/* Class */
// ES6 only
class ClassComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

// class with constructor
class ClassComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

// class & stateful component
class ClassComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {isClass: true}
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

// class & stateful component without constructor
class ClassComponent extends React.Component {
  state = {isClass: true}
  render() {
    return <h1>Hello, {this.state.isClass}</h1>
  }
}

// Not render if shallow unchanged for class
class ClassComponent extends React.PureComponent {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
}

// Not render if shallow unchanged for function
const FunctionalComponent = React.memo(props => <h1>Hello, {props.name}</h1>);