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.