In this lesson, you will learn your second programming pattern: separating presentational components from display components.
Click Run. In the browser, navigate to
You are looking at an rendered
<GuineaPigs /> component.
<GuineaPigs />'s job is to render a photo carousel of guinea pigs. It does this perfectly well! And yet, it has a problem: it does too much stuff.
We can break
<GuineaPigs /> into smaller components, but before we do: how do we know that
GuineaPigs does too much stuff? How can you tell when a component has too many responsibilities?
Separating container components from presentational components helps to answer that question. It shows you when it might be a good time to divide a component into smaller components. It also shows you how to perform that division.