React Components

Components are small, isolated, and reusable parts of UI. Technically, a component is a JavaScript function which takes an input [called props] and returns a React element (JSX). For example:

const TextRender = (text) => { 
  return <div>Hey {text}</div>
}

We can also extend React’s Component class to create a class based components, which has some additional features when compared to a function based component.

class TextRender extends React.Component {
  render () {
    return <div>Hey {this.props.text}!</div>;
  }
}

From the syntax point of view, the two types of components are:

  • Stateless Components
  • Stateful Components

From the usage point of view, the two types of components are:

  • Presentational Components
  • Container Components

State Vs Props

  • Both state and props are properties of a component.
  • We can change the value of the state while props are the read-only property.
  • State of the component lives [created] inside the component, but props are passed to the component as its attributes.
  • A change in state of the component (using setState method) calls the render function causing the component to re-render.

Let’s come back to the components now.

Stateless Components: As the name suggests, a stateless component does not have its own state. It’s a pure function, which gives the same set of output for the same set of inputs. We can create a stateless component using either of the function or class-based syntax.

Stateful Components: A stateful component has its own state. It also goes through the component lifecycle of mounting, updating, and un-mounting. It can only be created using class-based syntax.

There is no strict rule which states which component you should create in which scenario. But in general, the components which do not need to maintain their own state can be a stateless component.

For example, a header or footer can be stateless components as their use is to display some information. But a component which acts on user interaction or data change can be a contender for a stateful component.

Presentational Components: These components are usually responsible for how the UI looks. These can be stateful or stateless components. They do not have anything to do with the application data. They are not capable of changing the application state.

Container Components: These components are usually generated using higher order components. A higher order component is [like higher order functions] a component, which takes in a component as input or returns a component as output.

This article is a must read if you want to go into detail of usage of presentational and container components.