Type of Component

There are two types of component. These types are not just react-based but can be visualized in any other component-based UI library or framework. They include:

  • Presentation Component
  • Container Component

Presentation Component

These are contained components that are responsible for UI. They are composed with JSX and rendered using the render method. The key rule about this type of component is that they are stateless meaning that no state of any sort is needed in such components. Data is kept in sync using props.

If all that a presentation component does is render HTML based on props, then you can use stateless function to define the component rather than classes.

Container Component:

This type of component complements presentation component by providing states. It's always the guy at the top of the family tree, making sure that data is coordinated.

You do not necessarily need a state management tool outside of what React provides if what you are building does not have too much nested children and less complex.