React Components 101

A short and sweet run through.

What is a React Component?

React Components are the building blocks of a React App, they are everything from headers to custom date pickers and carousels. They are the lego blocks for you to create your Web Apps and Native Apps with.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

React JS Docs check it out here.

Types of React Component

There are three main types of component that you will use in your app.

  • Function Components
  • Function Components with Hooks
  • Class Components (Statefull)
  • Class Components (Stateless)
  • Class Components (PureComponent)

Class Components (Stateless) is a variation of Class Components (Statefull).

Functional Component

  • Function components are components created from JavaScript functions.
  • They do not contain state but can receive props.
  • These are useful for simple components that can function entirely from the props passed down to them. (This can be data and other functions)
  • A good example of a use case for this is a Button Component.

Use Case:

Function Components are used for very basic components that don't have their own methods and should be able to work entirely from props passed to them.

Functional Component with Hooks

React Hooks is a new addition as part of React 16.8.0, they enable developers to use state and effects in functional components. As a result they combine the features of functional components and class components.

  • With Hooks we can build components with less boilerplate
  • No more worrying about 'this'

Use Case:

Hooks enable Functional Components to have the same level of utility as Class Components so can be used for components that require access to life cycle methods and state such as custom date pickers for example.

Class Components

Class Components can be one of multiple types:

  • Standard
    • Has State
    • Has Props
    • Has Methods
    • Most Commonly used Component Type
  • Stateless
    • Has Props
    • Has Methods
    • Not Commonly use Component
  • PureComponent
    • Has State
    • Has Props
    • Has Methods
    • Performs a shallow prop and state comparison, can be used for a performance boost in some cases.
    • Becoming more popular for components that will render the same result from the same state and props.

Class Components (Standard)

Standard Class Components are the most common React Component used in React Apps. These can have their own methods, have access to the react lifecycle and they have their own state.

Use Case:

Class Components are used for components that require access to life cycle methods and state such as custom date pickers for example.

Class Components (Stateless)

Class Components without state are quite rare, these are Class based components without state being initialised.

Use Case:

Stateless Class Components are used for components that require methods such as the React Lifecycle methods but don't require their own state.

This has no performance benefit but helps reduce unneeded complexity.

Class Components (PureComponent)

Class PureComponents are Class Components extended React.PureComponent.

These perform shallow props and state checks, this can have a performance benefit for components that render the same result given the same state and props.

Though for complex data structures it can cause a few false positives.

Example:

Higher Order Components

Higher Order Components are React Components that accept a standard component as a Prop either as a dedicated prop or through props.children.

This then has additional props passed down to it.

Use Case:

React-Redux is used via the <code>connect()</code> HOC to add the Redux store to a component.

IntroductionReact