Difference between component and container in react redux Difference between component and container in react redux javascript javascript

Difference between component and container in react redux


Component is part of the React API. A Component is a class or function that describes part of a React UI.

Container is an informal term for a React component that is connect-ed to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

For more detail read presentational vs container components by Dan Abramov.


Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. They are sometimes called "presentational components" and the main concern is how things look

Containers

Containers are just like components without UI and Containers are concerned with how things work.. It mainly talks to the redux store for getting and updating the data

see the table comparison from Redux doc

enter image description here

Detailed explanation https://redux.js.org/basics/usage-with-react#presentational-and-container-components


Component which is responsible for fetching data and displaying is called smart or container components. Data can be come from redux, any network call or third party subscription.

Dumb/presentational components are those which are responsible for presenting view based on props received.

Good article with example here

https://www.cronj.com/blog/difference-container-component-react-js/