Separation of concerns in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does separation of concerns improve React component design?

Consider a React app where UI, data fetching, and state management are all mixed in one component. What is the main benefit of separating these concerns into different components or hooks?

A It reduces the number of components, making the app faster to load.

B It allows mixing UI and data logic freely without any structure.

C It makes the code easier to read, test, and maintain by isolating responsibilities.

D It forces all logic to be written inside the main App component for simplicity.

💡 Hint

Think about how breaking tasks into smaller parts helps in real life, like organizing a kitchen by utensils, ingredients, and appliances.

Separating concerns means each part of the app handles one job well. This makes the code cleaner and easier to fix or update.

❓ state_output

intermediate

What is the output of this React component with separated concerns?

Given the following React components, what will be rendered on the screen?

React

function useCounter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);
  return count;
}

function CounterDisplay() {
  const count = useCounter();
  return <div>Count: {count}</div>;
}

A A div showing 'Count: 0' initially, then increasing by 1 every second.

B A div showing 'Count: 0' that never changes.

C A div showing 'Count: NaN' due to incorrect state initialization.

D Nothing renders because useCounter is not a valid hook.

💡 Hint

Look at how useCounter updates state every second and returns the count.

The custom hook useCounter manages the count state and updates it every second. CounterDisplay uses this hook and shows the current count.

📝 Syntax

advanced

Which option correctly separates data fetching from UI in React?

Choose the code snippet that properly separates data fetching logic from UI rendering using hooks.

A

function DataComponent() {
  const [data, setData] = React.useState(null);
  fetch('/api/data').then(res => res.json()).then(setData);
  if (!data) return <div>Loading...</div>;
  return <div>{data.title}</div>;
}

B

function useData() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return data;
}

function DataComponent() {
  const data = useData();
  if (!data) return <div>Loading...</div>;
  return <div>{data.title}</div>;
}

C

function DataComponent() {
  const data = fetch('/api/data').then(res => res.json());
  return <div>{data.title}</div>;
}

D

function useData() {
  const data = fetch('/api/data').then(res => res.json());
  return data;
}

function DataComponent() {
  const data = useData();
  return <div>{data.title}</div>;
}

💡 Hint

Remember that data fetching should happen inside useEffect to avoid infinite loops and to handle async properly.

Option B uses a custom hook with useEffect to fetch data once and returns it. The component uses this hook and renders UI accordingly.

🔧 Debug

advanced

Why does this React component violate separation of concerns?

Examine the code below. What is the main problem related to separation of concerns?

React

function UserProfile() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);

  function handleClick() {
    alert(`User: ${user.name}`);
  }

  return (
    <div>
      <h1>{user ? user.name : 'Loading...'}</h1>
      <button onClick={handleClick}>Show Name</button>
    </div>
  );
}

A The component mixes data fetching, UI rendering, and event handling all in one place, making it harder to maintain.

B The alert inside handleClick causes a runtime error if user is null.

C The component does not fetch data correctly because useEffect is missing dependencies.

D The component should not use useState for user data.

💡 Hint

Think about how separating data fetching, UI, and event logic into different parts helps clarity.

While the code works, combining fetching, UI, and event logic in one component violates separation of concerns, making future changes harder.

🧠 Conceptual

expert

What is the best practice for separation of concerns in a large React app?

In a large React application, which approach best follows separation of concerns principles?

A Use only class components to keep state and UI tightly coupled.

B Put all logic and UI in one component to reduce the number of files and simplify imports.

C Write all data fetching in the root App component and pass data down as props everywhere.

D Use custom hooks for data and state logic, presentational components for UI, and container components to connect them.

💡 Hint

Think about dividing tasks like a team where each member has a clear role.

Custom hooks handle logic, presentational components focus on UI, and container components manage data flow. This clear separation improves maintainability and testing.

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