Component Types

There are two main types of components Functional and Class Components. If you need don’t need lifecycle methods prefer Functional /Stateless Components.

// Functional Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}


// Some other patterns you might see:

// Functional Component

const Profile = props => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.bio}</p>
    </div>
  );
};

// Functional Component with destructuring of props

const Profile = ({ name, bio }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{bio}</p>
    </div>
  );
};

Components can be used (composed) in many ways see the following links for patterns and thoughts on creating Components.

How do I decide what type of Component to use?

This comes down to a few factors… a primary one being you need to decide what a component should do. See: Some Thoughts on Function Components in React from A. Sharif @sharifsbeat for some help deciding.


In this video React Component Patterns by Michael Chan @chantastic breaks down some of the component types in a less technical way (using circles).

Also:

Stateless Function <Code />

Presentational and Container Components <Code />

Higher-Order Components <Code />

Function as Child Components / Render callbacks <Code />


Michael Jackson @mjackson - Never Write Another HoC

What is a Pure Component?

Pure Components are any Component declared as a function that has no state and returns the same markup given the same props.

import React from ‘react’;

const HelloWorld = ({name}) => (
 <div>{`Hi ${name}`}</div>
);

export default HelloWorld;

What types of components are there?