Utilizing Container & Presentational Components in React
Components are the building blocks for any React application. As the React documentation states — Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
When building a react application a useful convention is to decide wether you will make each component a Container Component or a Presentational Component. So, what is the difference between the two? And, how do you choose?
You many want to start by asking yourself what your component will be doing. Will it primarily be concerned with how things work? Or how things look?
If the answer is the former, you will most likely want to create a container component. Let’s take a closer look!
Container components often contain state. The example above makes use of the class component which allows us to set up and manage state in addition to providing access to lifecycle functions. You can also use hooks to manage state if you would prefer to use a functional component for your container. Here are a few other things to note about Container Components…
- They typically do not contain any DOM markup
- They provide data and behavior to presentational or other container components
Now onto our Presentational Component. Again, this component is typically concerned with how things in your application will look.
A presentational components primary responsibility is to render a piece of UI. Although they can be defined as regular react components, they are often defined as constants — which can cut down your applications load time if you have a large amount of data to display. Here are a few other things to note about Presentational Components.
- They receive data and callbacks exclusively via props and are often stateless.
- They typically do not know how to load or alter the data that they render.
- They usually have some DOM markup and styles of their own
Once you have you have decided whether each component will be a Container or Presentational Component it becomes a bit easier to separate concerns within your application and things become a bit less convoluted.
Thank you for reading!
