Single Page Application concept in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you click a navigation link in a React SPA?

In a React Single Page Application (SPA), clicking a navigation link usually does not reload the whole page. What is the main behavior you observe?

A The browser reloads the entire page and fetches all resources again.

B Only the URL changes and React updates the visible content without a full page reload.

C The browser opens a new tab with the linked page.

D The page content disappears and stays blank until manually refreshed.

💡 Hint

Think about how SPAs avoid full page reloads to make navigation faster.

In React SPAs, navigation changes the URL and React updates the displayed components without reloading the entire page. This makes the app feel faster and smoother.

❓ state_output

intermediate

What is the output after state update in a React SPA component?

Consider this React component snippet inside a SPA:

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

increment();
increment();
console.log(count);

What will console.log(count) output immediately after calling increment() twice?

React

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

increment();
increment();
console.log(count);

A 2

B 1

C Throws an error

D 0

💡 Hint

Remember that state updates in React are asynchronous and do not immediately change the variable.

React state updates are asynchronous. Calling setCount twice quickly does not immediately update the count variable. The logged value remains the initial 0.

📝 Syntax

advanced

Which React Router code correctly defines a SPA route?

In React Router v6, which code snippet correctly defines a route that renders HomePage component at path /home?

A <Route path="/home" render={() => <HomePage />} />

B <Route path="/home" component={HomePage} />

C <Route path="/home" element={<HomePage />} />

D <Route path="/home" children={<HomePage />} />

💡 Hint

React Router v6 uses the element prop to specify the component to render.

In React Router v6, routes use the element prop with JSX to render components. The other props are from older versions or invalid.

🔧 Debug

advanced

Why does this React SPA component cause an infinite render loop?

Look at this React component code:

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  });
  return <div>Count: {count}</div>;
}

Why does this cause an infinite render loop?

React

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  });
  return <div>Count: {count}</div>;
}

A Because useEffect runs after every render and updates state without a dependency array, causing continuous re-renders.

B Because setCount is called outside useEffect, causing immediate infinite updates.

C Because count is not initialized properly with useState.

D Because the component returns invalid JSX syntax.

💡 Hint

Think about how useEffect dependencies control when the effect runs.

Without a dependency array, useEffect runs after every render. Calling setCount inside it triggers another render, causing an infinite loop.

🧠 Conceptual

expert

What is the main advantage of a Single Page Application over traditional multi-page apps?

Choose the best explanation for why SPAs are often preferred over traditional multi-page applications.

A SPAs load the entire app once and update content dynamically, resulting in faster navigation and smoother user experience.

B SPAs require less JavaScript and are easier to build than multi-page apps.

C SPAs do not use URLs, so they avoid browser history issues.

D SPAs always have better SEO than multi-page apps without extra configuration.

💡 Hint

Think about how SPAs handle page changes compared to full reloads.

SPAs load the app once and update content dynamically without full page reloads, making navigation faster and smoother. Other options are incorrect or misleading.