What is the difference between a component and a container in React Redux?
- 1
These focus strictly on how things look. They are often stateless functional components that receive data and callbacks exclusively via props.
- 2
Logic: Little to none. They don't know where the data comes from; they just display it.
- 3
Redux: They have no dependency on the Redux store or actions.
- 4
Reusability: Highly reusable across different parts of an app.
- 5
Styles: Usually contain the CSS/styles.
- 1
These focus on how things work. They act as the glue between the Redux store and the presentational components.
- 2
Logic: They handle state management, data fetching, and event logic.
- 3
Redux: They are directly connected to Redux using the connect function (HOC) or hooks.
- 4
Reusability: Low. They are usually specific to a particular feature or data source.
- 5
Styles: Usually do not contain any CSS or DOM markup of their own (other than a wrapper).
Scenario Questions
0-2 years experience
- 1You need to display a list of products fetched from the Redux store. How would you split the work between a component and a container for this feature?
- 2If you accidentally connect a presentational component directly to the store, what issues might you notice in its props and re‑render behavior?
2-5 years experience
- 1While adding pagination to a user table, the UI flickers after each page change. How would you determine whether the problem lies in the container or the presentational component?
- 2A component now needs both Redux state (e.g., filtered list) and local UI state (e.g., a modal open flag). Explain how you decide what belongs in the container versus the component.
5-8 years experience
- 1In a large codebase you see many containers that also contain UI markup. What are the performance and maintainability implications, and how would you refactor them?
- 2When implementing server‑side rendering for a React‑Redux app, how does the component‑vs‑container distinction affect data preloading and bundle size?
8+ years experience
- 1Your organization is migrating from a legacy Redux codebase that mixes containers and components to a more modular architecture. What strategy would you propose to gradually separate concerns while minimizing risk?
- 2Across multiple teams, some use the container pattern while others use hooks like useSelector directly in components. How would you establish a consistent guideline, and what trade‑offs would you consider for future scalability?
Follow-up Questions
- Can you show a simple example of a pure presentational component?
- How would you unit‑test a container in isolation from its UI?
- What steps would you take if a container starts to grow too large?