Separation of concerns in React - Step-by-Step Execution

Concept Flow - Separation of concerns

Start: User Interaction

↓

Component A: Handles UI

↓

Component B: Handles Data Logic

↓

Component C: Handles API Calls

↓

Render Updated UI

↓

End

Shows how React splits tasks into components, each with a clear job, to keep code clean and easy to manage.

Execution Sample

React

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

function App() {
  const [count, setCount] = React.useState(0);
  return <Button onClick={() => setCount(count + 1)} />;
}

A button component handles UI, App component handles state logic, showing separation of concerns.

Execution Table

Step	Component	Action	State Before	State After	Rendered Output
1	App	Initialize count state	N/A	count = 0	<Button onClick=fn>Click me</Button>
2	Button	Render button with onClick handler	N/A	N/A	<button>Click me</button>
3	User	Clicks button	count = 0	N/A	N/A
4	App	onClick increments count	count = 0	count = 1	<Button onClick=fn>Click me</Button>
5	Button	Re-render button with updated props	N/A	N/A	<button>Click me</button>
6	End	No further actions	count = 1	count = 1	<button>Click me</button>

💡 User stops clicking, state stabilizes, UI reflects latest count.

Variable Tracker

Variable	Start	After Step 4	Final
count	undefined	1	1

Key Moments - 2 Insights

Why does the Button component not manage the count state?

Because the execution_table shows App holds the count state and passes the onClick handler down, keeping UI and logic separate.

What happens when the user clicks the button?

Step 3 and 4 show the click triggers App's state update, causing a re-render, not Button managing state directly.

Visual Quiz - 3 Questions

Look at the execution_table at Step 4, what is the value of count after the click?

A 0

B 1

C undefined

D 2

💡 Hint

Check the 'State After' column in Step 4 of execution_table.

At which step does the Button component re-render?

A Step 2

B Step 4

C Step 5

D Step 3

💡 Hint

Look for 'Button' and 'Re-render' in the Action column of execution_table.

If the count state was managed inside Button, how would the execution_table change?

A App would not update count, Button would handle clicks and state updates.

B No change, Button already manages state.

C App would handle API calls instead.

D Button would stop rendering.

💡 Hint

Refer to variable_tracker and how count state is tracked in App in the current table.

Concept Snapshot

Separation of concerns in React means splitting UI, logic, and data handling into different components.
Each component has one clear job.
State lives where it belongs, passed down as props.
This keeps code clean, easier to read and maintain.
Example: App manages state, Button handles UI and events.

Full Transcript

Separation of concerns in React means dividing the app into parts where each part does one job. For example, a Button component only shows the button and handles clicks, but it does not keep track of how many times it was clicked. Instead, the App component holds the count state and updates it when the button is clicked. This way, UI and logic are separated. The execution table shows the steps: App initializes count, Button renders, user clicks, App updates count, Button re-renders with new props. This clear division helps keep code simple and easy to manage.

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