Separation of Concerns: Split Your React Components into Containers and Views
Many frontend engineers probably have experienced the head-scratching moment when their React components become so gigantic that they keep losing their train of thought when navigating through their frontend code. To salvage readability, one of the most common practices is to split up the humongous React components into smaller pieces. Traditionally, they would do this by chopping up the JSX elements. This method can effectively improve the readability of React components whose sole responsibility is to display data. However, on top of displaying data, some React components are also responsible for retrieving data from the backend. The more effective way to make such React components readable is to separate them into Containers and Views. In this article, I will demonstrate how to divide a React component into a Container and a View based on the principle of separation of concerns.
What Are Containers and Views?
First, let me clarify what Containers and Views are respectively in charge of. A Container component is responsible for fetching data and maintaining the state. It does not concern itself with data presentation at all. On the other hand, a View component’s sole responsibility is to display data. It should not worry about how to retrieve data from the backend.
As you probably have noticed, there is a clear separation of concerns between Container and View components. Such an approach helps improve the overall code readability. When looking at Container components, we can concentrate on how we retrieve and update data. When going through View components, we can have a laser focus on the way we present data to our users.
How to Split a Component into a Container and a View?
In this section, I will demonstrate how to split a React component into a Container and a View component with a simple example. Let’s say we have a page-level component. It retrieves user information from the backend, displays the user information, and allows users to change their nickname.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import { useEffect, useState } from 'react'; import styles from './UserPage.module.css'; import { useEffect, useState } from 'react'; import styles from './UserPage.module.css'; type User = { id: number; firstName: string; lastName: string; email: string; avatarUrl: string; nickname: string; }; type UserPageProps = { userId: number; }; export function UserPage({ userId }: UserPageProps) { const [user, setUser] = useState<User | null>(null); const [newNickname, setNewNickname] = useState(''); // When we pass an empty dependency array to the `useEffect` hook, it will only execute the function we pass to it once upon the component's creation. useEffect(() => { fetch(`/api/v1/users/${userId}`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, }) .then((res) => { return res.json(); }) .then((user: User) => { setUser(user); }); }, []); const handleNicknameSubmit = () => { setUser(null); fetch(`/api/v1/users/${userId}/nickname`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ nickname: newNickname, }), }) .then((res) => { return res.json(); }) .then((user: User) => { setUser(user); }); }; return user ? ( <> <div className={styles.NameWrapper}> <div className={styles.firstName}>First Name: {user.firstName}</div> <div className={styles.lastName}>Last Name: {user.lastName}</div> </div> <div className={styles.AvatarWrapper}> <img src={user.avatarUrl} /> </div> <div className={styles.nicknameInputWrapper}> <label>Nickname: </label> <input type="text" value={newNickname} onChange={(e) => { setNewNickname(e.target.value); }} /> <button onClick={handleNicknameSubmit}>Submit</button> </div> </> ) : ( <div>Loading...</div> ); } |
This page-level component first makes a GET request to /api/v1/users/${userId} to retrieve information about the current user on mount. Then, this component displays the information upon receiving it. This component also has an input for the current user to change their nickname. It triggers a POST request to /api/v1/users/${userId}/nickname to update the current user’s nickname when the user clicks the Submit button.
Throughout my career, I have seen many page-level components like this one, some even more complicated. They are all-encompassing, and you can find everything in one place. However, it is also easy to get lost when reading them because there’s simply too much going on in the same place.
Next, let’s split this page-level component into a Container and a View component to make it more readable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import { useEffect, useState } from 'react'; import styles from './UserPage.module.css'; import { useEffect, useState } from 'react'; import styles from './UserPage.module.css'; type User = { id: number; firstName: string; lastName: string; email: string; avatarUrl: string; nickname: string; }; type UserPageViewProps = { user: User; newNickname: string; setNewNickname: (newNickname: string) => void; handleNicknameSubmit: () => void; }; function UserPageView({ user, newNickname, setNewNickname, handleNicknameSubmit, }: UserPageViewProps) { return ( <> <div className={styles.NameWrapper}> <div className={styles.firstName}>First Name: {user.firstName}</div> <div className={styles.lastName}>Last Name: {user.lastName}</div> </div> <div className={styles.AvatarWrapper}> <img src={user.avatarUrl} /> </div> <div className={styles.nicknameInputWrapper}> <label>Nickname: </label> <input type="text" value={newNickname} onChange={(e) => { setNewNickname(e.target.value); }} /> <button onClick={handleNicknameSubmit}>Submit</button> </div> </> ); } type UserPageContainerProps = { userId: number; }; export function UserPageContainer({ userId }: UserPageContainerProps) { const [user, setUser] = useState<User | null>(null); const [newNickname, setNewNickname] = useState(''); useEffect(() => { fetch(`/api/v1/users/${userId}`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, }) .then((res) => { return res.json(); }) .then((user: User) => { setUser(user); }); }, []); const handleNicknameSubmit = () => { setUser(null); fetch(`/api/v1/users/${userId}/nickname`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ nickname: newNickname, }), }) .then((res) => { return res.json(); }) .then((user: User) => { setUser(user); }); }; if (!user) { return <div>Loading...</div>; } return ( <UserPageView user={user} newNickname={newNickname} setNewNickname={setNewNickname} handleNicknameSubmit={handleNicknameSubmit} /> ); } |
As you can see in the code above, we have extracted the code for displaying user information and made it into a new View component named UserPageView. As for the logic for retrieving user information and making an API call to change the user’s nickname, we have kept it in the original page-level component that we have renamed to UserPageContainer. When working on the UserPageView component, we can focus on what data it displays and the styling of the elements. When adjusting UserPageContainer, we do not have to get distracted by anything irrelevant to state maintenance or fetching and updating user information. Overall, it becomes easier to read and refactor the frontend code for this page.
In this article, I started by defining Containers and Views. Then, I explained why splitting React components into Containers and Views can improve readability. Finally, I demonstrated how to separate a React component into a Container and a View with a concrete example. It might be time-consuming to refactor your React components with this technique, but it can improve your and your coworkers’ work efficiency in the long term. Please give this refactoring technique a try when you have time!
