Component organization in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider this React component structure. What will be rendered on the screen?

React

import React from 'react';

function Header() {
  return <header><h1>Welcome</h1></header>;
}

function Footer() {
  return <footer><p>Goodbye</p></footer>;
}

function Page() {
  return (
    <main>
      <Header />
      <section><p>Main content</p></section>
      <Footer />
    </main>
  );
}

export default Page;

A <header><h1>Welcome</h1></header><section><p>Main content</p></section><footer><p>Goodbye</p></footer>

B <main><section><p>Main content</p></section></main>

C <main><header><h1>Welcome</h1></header><section><p>Main content</p></section><footer><p>Goodbye</p></footer></main>

D <header><h1>Welcome</h1></header><main><section><p>Main content</p></section></main><footer><p>Goodbye</p></footer>

💡 Hint

Look at how components are nested inside the Page component's return statement.

The Page component returns a <main> element that contains <Header />, a <section>, and <Footer />. So the output is the <main> wrapping all three parts.

📝 Syntax

intermediate

Which option correctly defines a reusable button component in React?

Which code snippet correctly defines a reusable button component that accepts a label prop and calls onClick when clicked?

A

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

B

function Button(label, onClick) {
  return <button onClick={onClick}>{label}</button>;
}

C

const Button = (props) => {
  return <button>{props.label}</button>;
}

D

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

💡 Hint

Remember that props are passed as an object and event handlers must be assigned properly.

Option A correctly destructures label and onClick from props and assigns onClick to the button. Option A does not destructure props properly. Option A misses the onClick handler. Option A uses onClick without receiving it as a prop.

🔧 Debug

advanced

Why does this React component fail to update the displayed count?

Examine the code below. Why does clicking the button not update the displayed count?

React

import React, { useState } from 'react';

function Counter() {
  let count = 0;

  function increment() {
    count += 1;
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Add</button>
    </div>
  );
}

export default Counter;

A Because the button element is missing an onClick attribute.

B Because the increment function is not called when the button is clicked.

C Because useState is used incorrectly and should be replaced with useEffect.

D Because 'count' is a local variable and React does not track changes to it for re-rendering.

💡 Hint

Think about how React tracks changes to update the UI.

React only re-renders components when state or props change. Here, 'count' is a normal variable, so React does not know it changed. Using useState is needed to trigger re-render.

❓ lifecycle

advanced

What happens when this React component uses useEffect with an empty dependency array?

Consider this component:

import React, { useEffect } from 'react';

function Logger() {
  useEffect(() => {
    console.log('Component mounted');
  }, []);

  return <div>Check console</div>;
}

export default Logger;

What is the behavior of the console log?

A The message 'Component mounted' logs only once when the component first appears.

B The message never logs because the dependency array is empty.

C The message logs every time the component re-renders.

D The message logs repeatedly in an infinite loop.

💡 Hint

Recall how useEffect behaves with an empty dependency array.

When the dependency array is empty, useEffect runs only once after the first render, similar to componentDidMount.

🧠 Conceptual

expert

How does splitting a large React component into smaller components improve the app?

Which of the following is the best explanation for why organizing UI into smaller React components is beneficial?

A It forces all state to be managed globally, simplifying data flow.

B It improves code reuse, readability, and makes testing and maintenance easier.

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

D It eliminates the need for props by keeping all logic in one place.

💡 Hint

Think about how smaller parts help manage complexity.

Breaking UI into smaller components helps reuse code, makes it easier to read and test, and simplifies maintenance. It does not reduce components or force global state.