React Component Types

React has many different types of components and all provide different kind of use cases and performance optmizations. In this post we will see different types of components in brief and which component to use when

Basic Component 

These are the default component of react which we use always, this has the all the react features like state, props, etc 

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

Functional Component

Functional components or stateless components can be defined simply as function. They don’t have any state or “this” or any lifecycle events. 

These components are mainly use for presentational logic and applying styling. There can be applied in different ways 

// Functional Component
function Welcome(props) {
  return <h1>Hello, {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>
  );
};

There are lot of advantages of using functional components over standard components. 

A detailed blog can be found here https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

React.memo

React memo can be used on top of functional components to further optimize the speed. 

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

Read more here https://reactjs.org/docs/react-api.html#reactmemo

Container Components 

These are also called higher level components, and used as parent level components. These components are standard react components but responsible for manage state, api interactions, redux  etc

These components are not responsible for ui but rather manage the logic of the application

More details here https://reactpatterns.com/#container-component

Higher Order Components 

These are a very special type of components in react and are used to make cross cutting component logic reusable. These are bit complex to understand at first but are quite useful in application. 

This is an excellent blog which explain HOC in detail https://tylermcginnis.com/react-higher-order-components/

Read More here: https://reactjs.org/docs/higher-order-components.html

Above are some of the important type of components in react with specific uses. But there are many more classification/patterns used in react which can be seen here https://reactpatterns.com