Menu
Containers are the primary components and the entry point from which we call child or generic components. Basically, container components are called smart components because each container component is connected to Redux and consumes the global data coming from the store.
Container components can be primarily referred to as the parent elements of other components in a React app. They serve as a bridge between the normal components that render the UI and the logic that makes the UI components interactive and dynamic. The most common function of a container component is to obtain data.
Presentational components are mostly concerned with generating some markup to be outputted. Container components are mostly concerned with the “backend” operations. They might handle the state of various sub-components. They might wrap several presentational components.
There are three building parts: actions, store, and reducers. Let's briefly discuss what each of them does. This is important because they help you understand the benefits of Redux and how it's to be used.
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
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/
React has two main components first is smart component(containers) and second is dumb(presentation component). Containers are very similar to components, the only difference is that containers are aware of application state. If part of your webpage is only used for displaying data (dumb) then make it a component. If you need it to be smart and aware of the state (whenever data changes) in the application then make it a container.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With