From the course: React: Design Patterns (2021)
What are container components?
From the course: React: Design Patterns (2021)
What are container components?
- [Instructor] Okay, so the next React design pattern that we're going to take a look at is something called Container Components. So what are container components exactly? Well, container components are basically React components that take care of all of the data loading and other data management for their child components. In order to show you what I mean with this, let's imagine that we have the setup that you see here, a container component with several child components inside of it. Well, normally what you would do, if you're like most beginning to Intermediate React Developers is you would just have each of those child components load their own data and then display it, right? So up where it says low data, you probably have a useState hook and a useEffect hook and use something like Axios or Fetch to get data from a server. Now, the problem with this is that a lot of the time we need our child components to be able to share that logic. And the way that container components solve that problem is by splitting that logic out into its own component, which is the container and the container then takes care of loading that data and passes it automatically to the children components. We're going to see how exactly this works very soon. So then the main idea of container components is this, just like how with layout components, we didn't want our child components to know or care what layout they were part of. With container components, we don't want our components to know where their data is coming from or how to manage it. We just want our components to be dumb and take some props and display whatever they need to display.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
