React vs traditional JavaScript - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component display?

Consider this React functional component using useState. What will be shown on the screen after clicking the button twice?

React

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

A Count: 0

B Count: NaN

C Count: 1

D Count: 2

💡 Hint

Remember that useState updates the state and re-renders the component.

Each click increases the count by 1. After two clicks, count becomes 2 and is displayed.

🧠 Conceptual

intermediate

How does React differ from traditional JavaScript DOM manipulation?

Which statement best describes the main difference between React and traditional JavaScript when updating the user interface?

A React uses a virtual DOM to efficiently update only parts of the real DOM that changed.

B React updates the UI by changing the real DOM directly on every change.

C Traditional JavaScript uses a virtual DOM, but React manipulates the real DOM directly.

D React requires manual DOM queries and updates like traditional JavaScript.

💡 Hint

Think about how React optimizes UI updates.

React creates a virtual copy of the DOM and compares it to the previous version to update only changed parts, improving performance.

📝 Syntax

advanced

Which React code snippet correctly updates state based on previous state?

In React, what is the correct way to update state when the new value depends on the previous state?

A setCount(prevCount => prevCount + 1);

B setCount(count + 1);

C setCount(() => count + 1);

D setCount(count++);

💡 Hint

Use the updater function form of setState to avoid stale state.

Using a function inside setCount ensures the update uses the latest state value, avoiding bugs when updates are asynchronous.

🔧 Debug

advanced

Why does this React component not update the displayed count?

Look at this React component. Why does clicking the button not change the displayed count?

React

import React, { useState } from 'react';

export default function Counter() {
  let count = 0;
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => { count += 1; }}>Increment</button>
    </>
  );
}

A Because the button's onClick handler is not called correctly.

B Because count is a local variable and React does not track its changes for rendering.

C Because useState is not initialized with count.

D Because the component is missing a return statement.

💡 Hint

React only re-renders when state or props change.

Local variables like count do not trigger React to re-render. State must be used to update UI.

❓ lifecycle

expert

What happens when a React component with useEffect dependency array is rendered multiple times?

Given this React component, how many times will the effect run if the component re-renders multiple times without changing the 'value' prop?

React

import React, { useEffect } from 'react';

export default function Example({ value }) {
  useEffect(() => {
    console.log('Effect ran');
  }, [value]);
  return <p>{value}</p>;
}

A The effect runs only once when the component mounts.

B The effect runs every time the component re-renders, regardless of 'value'.

C The effect runs only when 'value' changes between renders.

D The effect never runs because the dependency array is empty.

💡 Hint

Think about how useEffect dependencies control when the effect runs.

The effect runs only when the 'value' prop changes. Re-renders without 'value' change do not trigger the effect.