REACT DESIGN PATTERNS Container Components, Presentational Components & Functional Components

4 min readJan 6, 2021

Presentational and container components are common design pattern for building a react applications. Where you divide your components into two box. The presentational components primarily concern with how the things look in your UI. Container components which are concern with how the things work in your React Application. Actually when you create a React Application you should divide components as container components and presentational components. This is the best way to keep track of flow in your application. It’s also help you to re-use your dynamic code and if your codes break in your application , it is very easy to track your codes and find the bugs. It’s also makes React one of the popular and preferable programming language for most of developers. Because it’s easy to handle all the codes via separated components for large applications. Let’s take a closer look those components which makes life easier for us !

Presentational Components

When we see some presentational component , it does not mean that the component is a class component defined by the React library. Presentational components also know as a “Dump Components”. The reason to call them “Dump Component” because they don’t know how to handle state. These components mostly Java Script functions. Presentational components not a such thing in the React library. It’s just implies a practice which programmers have used when they create a react application. This is just simple useful and dynamic convention for design pattern of react that most of developer love to rely on this convention. They have a level of interactivity with using callbacks. Callback functions provides most dynamic functions in presentational components. They also help you to avoid repeating yourself and writing very dry and re-usable codes in your application. Presentational components do not interact with Redux store.

Here’s a list of defining features:

Presentational components are concerned with how things look.
Class components contain a render method but presentational components just return JS.
They do not know how to handle or manage to state (data) .
They mostly does not have any internally changeable state properties.
The best written as stateless functional components is presentational components.

Example

const Player= ({ name, img_url}) => (
  <div className="player">
    <img src={ img_url } alt={name}/>
    <h3>{ name }</h3>
  </div>
)
export default Player;

Functional Components:

Functional Components makes Presentational components simpler. So if Presentational components does not have state , We also don’t need to a component or Java Script object type of component. We can just have simple function which is takes an input and returns JSX.

As I described above Functional components are just Java Scripts functions. They can have properties and reference as a props and return JSX for UI. There are no state variables can assigned with different values. They always very stable and there is nothing worry about return something in our components unpredictable. Therefore We also call Functional components as “pure components”.

They don’t know about state and they mostly knows as stateless components. Functional components is tricky; Before when they introduced they could not handle the state. But hooks are a new addition in React 16.8. We can use state and other React features without writing a class. We can handle state with { useState } hook in functional components.

Functional components gets props and return to JSX code. This components can be different when it comes to handle the state. They can access to state but they still don’t contribute lifecycle hooks.

Example

import React from 'react'; function Greet() { 
  return <h1> Hello Soner </h1> }export default Greet;

Functional components (stateless) snipped code

ES6 arrow function also give a concise convention to implement Functional Component in React application.

Example

import React from 'react';const Greet = () => <h1> Hello Soner</h1>export default Greet;

Functional components (arrow function) snipped code

When would I use a Hook? If you write a function component and you need to handle some state to it. Now you are able to use a Hook inside the function component. Hooks don’t work inside classes. But you can use them instead of writing classes.

import React, { useState } from 'react';function Example() {*Declare a new state variable, which we'll call "count"const [count, setCount] = useState(0);

Containers Components (Smart Components): The containers components are known as smart components. They are stateful components they know how to handle state.They can update state therefore they called smart components. They created with the class keyword components are going into the components folder . They also provide state and behavior for presentational components to passing down as a prop. They are primarily concerned with how things work. Container components are the only component can interact with Redux through dispatch and action to the Redux store.

Here’s a list of defining features:

Container components may contain both presentational and container components “inside” but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles.
Container components handle the state(data )and behavior to other container components.
Container components mostly stateful, handle the state to serve as data sources.
Container components usually can generated using higher order components such as connect() from React Redux

Example

class PlayerListContainer extends React.Component {
  state = { players: [] };  
 
 componentDidMount() {
    fetchPlayers(players =>
      this.setState({ players: players }));
  }      render() {
     return <PlayerList players={this.state.players} />;
  }
}export default PlayerListContainer;