flâneur

Container/Presentational Pattern

patterns.dev · 1,252 words · saved by 1 readers

Enforce separation of concerns by separating the view from the application logic

In React, one way to enforce separation of concerns is by using the Container/Presentational pattern . With this pattern, we can separate the view from the application logic. Let’s say we want to create an application that fetches 6 dog images, and renders these images on the screen. DogImages.js DogImagesContainer.js 1 import React from "react" ; 2 3 export default function DogImages ( { dogs } ) { 4 return dogs . map ( ( dog , i ) => < img src = { dog } key = { i } alt = " Dog " /> ) ; 5 } Open CodeSandbox Ideally, we want to enforce separation of concerns by separating this process into two

saved by

related reading