Separation of concerns in React - Mini Project: Build & Apply

Separation of Concerns in React Components

📖 Scenario: You are building a simple React app that shows a list of books with their authors. To keep your code clean and easy to maintain, you want to separate the data, configuration, and display logic into different parts.

🎯 Goal: Build a React app that uses separate components and variables for the book data, a configuration for filtering, and a component that shows only books matching the filter.

📋 What You'll Learn

Create a list of books as an array of objects with exact titles and authors

Add a configuration variable to filter books by author name

Use a React functional component to filter and display the books based on the configuration

Use a separate child component to render each book's title and author

💡 Why This Matters

🌍 Real World

Separating concerns helps developers build React apps that are easier to read, test, and update. It is common to keep data, configuration, and UI components separate.

💼 Career

Understanding separation of concerns is essential for React developers to write maintainable code and collaborate effectively in teams.

1

Create the book data array

Create a constant array called books with these exact objects: { title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { title: '1984', author: 'George Orwell' }, and { title: 'To Kill a Mockingbird', author: 'Harper Lee' }.

React

// Create the books array with the given objects
// Your code here

Hint

Use const books = [ ... ] with objects inside the array.

2

Add a filter configuration variable

Create a constant string called filterAuthor and set it to 'George Orwell'.

React

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

// Create filterAuthor variable here
// Your code here

Hint

Use const filterAuthor = 'George Orwell'; to set the filter.

3

Filter and display books in a React component

Create a React functional component called BookList that filters the books array using filterAuthor and returns a <div> containing a list of <BookItem> components for each filtered book. Use book.title and book.author as props for <BookItem>. Use book.title as the key.

React

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

const filterAuthor = 'George Orwell';

// Create BookList component here
// Your code here

Hint

Use books.filter inside BookList and map to <BookItem>.

4

Create the BookItem component

Create a React functional component called BookItem that accepts title and author as props and returns a <div> containing the book title in a <strong> and the author in a <em>.

React

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

const filterAuthor = 'George Orwell';

function BookList() {
  const filteredBooks = books.filter(book => book.author === filterAuthor);
  return (
    
      {filteredBooks.map(book => (
        
      ))}
    
  );
}

// Create BookItem component here
// Your code here

Hint

Use props { title, author } and return a <div> with <strong> and <em>.

Practice

1. What does separation of concerns mean in React development?

easy

A. Dividing the app so each part handles one specific task

B. Writing all code in a single component for simplicity

C. Mixing UI and data logic in the same function

D. Using only class components instead of functions

Solution

1. Step 1: Understand the concept of separation of concerns

   It means each part of the app should focus on one clear responsibility, like UI or data handling.

2. Step 2: Identify the correct description

   Dividing the app so each part handles one specific task correctly describes dividing the app so each part handles one specific task, which matches the concept.

3. Final Answer:

   Dividing the app so each part handles one specific task -> Option A

4. Quick Check:

   Separation of concerns = dividing tasks clearly [OK]

Hint: Think: one part, one job in your app [OK]

Common Mistakes:

• Thinking all code should be in one component
• Mixing UI and logic in the same place
• Confusing separation with using classes

2. Which of the following is the correct way to separate UI and logic in React?

easy

A. Put all UI and logic inside one component's render method

B. Create a UI component and a separate hook for logic

C. Write logic inside HTML tags directly

D. Use inline styles to handle logic

Solution

1. Step 1: Identify proper separation of UI and logic

   React encourages using components for UI and hooks or functions for logic.

2. Step 2: Match options to this pattern

   Create a UI component and a separate hook for logic correctly separates UI in a component and logic in a hook, following best practices.

3. Final Answer:

   Create a UI component and a separate hook for logic -> Option B

4. Quick Check:

   UI + logic separated = Create a UI component and a separate hook for logic [OK]

Hint: Use hooks for logic, components for UI [OK]

Common Mistakes:

• Putting logic inside render method
• Trying to write logic inside HTML
• Using styles to control logic

3. Given this React code, what will be the output?

function UserName({ name }) {
  return <h1>User: {name}</h1>;
}

function UserLogic() {
  const user = { name: 'Anna' };
  return <UserName name={user.name} />;
}

medium

A. <h1>User: </h1>

B. Error: user is undefined

C. <h1>User: Anna</h1>

D. UserName component not found

Solution

1. Step 1: Trace the data flow from UserLogic to UserName

   UserLogic creates a user object with name 'Anna' and passes user.name as prop to UserName.

2. Step 2: Check UserName output

   UserName receives name='Anna' and renders <h1>User: Anna</h1> correctly.

3. Final Answer:

   <h1>User: Anna</h1> -> Option C

4. Quick Check:

   Prop passed correctly = <h1>User: Anna</h1> [OK]

Hint: Follow props from parent to child component [OK]

Common Mistakes:

• Assuming user is undefined outside UserLogic
• Expecting empty output if prop missing
• Confusing component names

4. What is wrong with this React code regarding separation of concerns?

function Profile() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);
  return <div>{user.name}</div>;
}

medium

A. Fetching data and UI rendering are mixed in one component

B. useEffect hook is used incorrectly

C. State should not be used in functional components

D. The fetch URL is invalid

Solution

1. Step 1: Identify concerns in the Profile component

   Profile handles both fetching user data and rendering UI, mixing logic and UI.

2. Step 2: Understand separation of concerns principle

   Best practice is to separate data fetching logic from UI components, e.g., using custom hooks.

3. Final Answer:

   Fetching data and UI rendering are mixed in one component -> Option A

4. Quick Check:

   Mixed logic and UI = Fetching data and UI rendering are mixed in one component [OK]

Hint: Keep data fetching separate from UI components [OK]

Common Mistakes:

• Thinking useEffect is wrong here
• Believing state can't be used in functions
• Assuming fetch URL is the problem

5. You want to improve this React app's separation of concerns:

function Dashboard() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);
  return <div>{data ? <Display data={data} /> : 'Loading...'}</div>;
}

Which change best improves separation of concerns?

hard

A. Remove useEffect and fetch data synchronously

B. Combine Display and Dashboard into one component

C. Fetch data inside Display component instead

D. Move data fetching into a custom hook and keep Dashboard for UI only

Solution

1. Step 1: Analyze current code responsibilities

   Dashboard handles both fetching data and rendering UI, mixing concerns.

2. Step 2: Choose best separation approach

   Moving data fetching to a custom hook isolates logic, leaving Dashboard focused on UI.

3. Final Answer:

   Move data fetching into a custom hook and keep Dashboard for UI only -> Option D

4. Quick Check:

   Separate logic in hooks, UI in components = Move data fetching into a custom hook and keep Dashboard for UI only [OK]

Hint: Use custom hooks for logic, components for display [OK]

Common Mistakes:

• Merging components reduces separation
• Fetching data inside UI components mixes concerns
• Removing useEffect breaks async data loading