What is the difference between Component and Container in Redux ?
Last Updated :
28 Apr, 2025
Redux is a state management library for JavaScript applications that helps to store and manage the state of an application in a single store, making it easier to maintain and update the state as the application grows. In this article, we will learn about Component & Container in Redux, along with discussing the significant distinction that differentiates Component from Container.
Component: A Component in Redux refers to a presentational component that is responsible for rendering the UI based on the state and props passed to it. It is considered a "dumb" component as it does not handle any logic or state updates.
Syntax:Â
import React from 'react';
const Component = ({ state, props }) => {
return (
<div>
<p>{state.value}</p>
</div>
);
};
export default Component;
Advantages:
- Easy to write and understand.
- Reusable.
- Can be tested independently.
Disadvantages:
- No access to the Redux store.
- Limited ability to perform logic or updates to the state.
Example: This component takes an array of users as a prop and renders a list of users.
JavaScript
//App.js
import "./App.css";
import React, { useState } from 'react';
import UserList from './UserList';
const App = () => {
const [users, setUsers] = useState([
{ id: 1, name: 'Dhruv Rawat' },
{ id: 2, name: 'Vinoba Bhave' },
{ id: 3, name: 'Medha Patkar.' },
]);
return (
<div>
<h1>User List</h1>
<UserList users={users} />
</div>
);
};
export default App;
JavaScript
//UserList.js
import React from 'react';
const UserList = ({ users }) => (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
export default UserList;
Output:

Container: A Container in Redux refers to a component that is connected to the Redux store and is responsible for dispatching actions and updating the state. It is considered a "smart" component as it handles the logic and state updates.
Syntax:
import { connect } from 'react-redux';
import Component from './Component';
function mapStateToProps(state) {
return {
data: state.data
};
}
export default connect(mapStateToProps)(Component);
Advantages:
- Access to the Redux store and dispatch function
- Ability to perform logic and updates to the state
Disadvantages:
- More complex to write and understand
- Not reusable
Example: This container uses the connect function from the react-redux library to connect to the Redux store. The mapStateToProps function is used to specify which parts of the state should be passed down as props to the component. In this example, the entire user's state is passed down.
JavaScript
//App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ConnectedUserList from './ConnectedUserList';
const App = () => (
<Provider store={store}>
<ConnectedUserList />
</Provider>
);
export default App;
JavaScript
//store.js
import { createStore } from 'redux';
const initialState = {
users: [
{ id: 1, name: 'Ridhiya Negi' },
{ id: 2, name: 'Geet Negi' },
],
};
const rootReducer = (state = initialState, action) => state;
export default createStore(rootReducer);
JavaScript
//ConnectedUserList.js
import { connect } from 'react-redux';
import UserList from './UserList';
const mapStateToProps = state => ({
users: state.users,
});
export default connect(mapStateToProps)(UserList);
JavaScript
//UserList.js
import React from 'react';
const UserList = ({ users }) => (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
export default UserList;
Output:

Difference between Component and Container:
|
Renders UI based on state and props. | Dispatches actions and updates state. |
"Dumb" component. | "Smart" component. |
Easy to write and understand. | More complex to write and understand. |
Reusable | Not reusable |
No access to the Redux store. | Access to the Redux store and dispatch function. |
Can be tested independently. | Cannot be tested independently. |
Focuses on presentation. | Focuses on data management. |
Summary: The main difference between a Component and a Container in Redux is that Components are responsible for rendering the UI, while Containers are responsible for connecting the application state to the components and updating the state. Components are simple, reusable, and easy to write, while Containers are more complex and handle the logic and state updates. It is generally recommended to keep the components simple and separate the logic and state management to the Containers. This approach makes the code easier to maintain, test, and debug.
Similar Reads
What is the Difference between Element and Component ? An Element is an object that represents a DOM node it is a part of DOM structure, while a component is a reusable block of code that contains logic, states, and also returns the Element. The element contains the information to be rendered on the UI and the Components are composed of the elements.Tab
4 min read
What is the difference between Podman and Docker Compose? Podman and Docker Compose are two tools with related functions concerning the operation of containers but each satisfies a different role in the container taxonomy. Podman is a container engine to collects, operates, manages, and runs containerized applications without a daemon, which is more secure
7 min read
What are the differences between Redux and Flux in ReactJS ? During the phase of applications or software development, we gather the requirements of customers to create a solution to solve the problem of customers or businesses. To solve problems we rely on different technologies and architecture patterns. for a long time, developers were using MVC (Model-Vie
10 min read
Difference between React.Component and React.PureComponent? A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. But React has two types of Components:React.PureComponent: It is one of the most significant ways to optimize React applic
3 min read
Difference Between the views and components Folders in a Vue Project? In the Vue.js project, folder structure plays a significant role in organizing code efficiently, especially when it comes to building modular and scalable applications. Two key folders in the structure are views and components folders. Both serve different purposes in the overall architecture of the
6 min read