State vs props comparison in React - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main difference between state and props in React?

Choose the option that best describes the key difference between state and props in React components.

A State is mutable and managed inside the component; props are immutable and passed from parent to child.

B State and props are both immutable and cannot be changed after initialization.

C Props can be changed by the component itself; state is passed from parent components.

D Props are used only in class components; state is used only in functional components.

💡 Hint

Think about who controls the data and whether it can be changed inside the component.

State is data that a component controls and can change over time. Props are data passed down from a parent component and cannot be changed by the receiving component.

❓ component_behavior

intermediate

What will this React component display?

Given the component below, what will be shown on the screen?

React

import React, { useState } from 'react';

function Greeting(props) {
  const [name, setName] = useState('Alice');
  return <h1>Hello, {props.name} and {name}!</h1>;
}

// Usage: <Greeting name="Bob" />

A Hello, Alice and Bob!

B Hello, Bob and Alice!

C Hello, undefined and Alice!

D Hello, Bob and undefined!

💡 Hint

Look at how props and state are used inside the component.

The component receives name as a prop with value "Bob" and has internal state name initialized to "Alice". It displays both values.

❓ lifecycle

advanced

When does a React component re-render due to state or props changes?

Which of the following statements correctly describes when a React functional component re-renders?

A It re-renders only when its state changes, not when props change.

B It re-renders only when its props change, not when state changes.

C It re-renders when either its state or props change.

D It never re-renders automatically; you must force it manually.

💡 Hint

Think about what triggers React to update the UI.

React re-renders a component whenever its state or props change, so the UI stays up to date.

📝 Syntax

advanced

Which code snippet correctly updates state in a React functional component?

Choose the option that correctly updates the count state variable by adding 1.

React

import React, { useState } from 'react';

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

  function increment() {
    // Update count here
  }

  return <button onClick={increment}>Count: {count}</button>;
}

A setCount(prev => prev + 1);

B count = count + 1;

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

D setCount(count + 1);

💡 Hint

Consider the safest way to update state when relying on previous value.

Using the updater function setCount(prev => prev + 1) ensures the latest state is used, avoiding bugs in asynchronous updates.

🔧 Debug

expert

Why does this React component not update the displayed count when the button is clicked?

Examine the code below. The count does not change on button clicks. What is the cause?

React

import React, { useState } from 'react';

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

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

  return <button onClick={increment}>Count: {count}</button>;
}

A The increment function is not called because the button has no onClick handler.

B The component must be a class component to update state correctly.

C useState is not initialized properly; it should be useState(1) to start counting.

D Directly modifying the state variable 'count' does not trigger a re-render; setCount must be used.

💡 Hint

Think about how React detects changes to update the UI.

State variables in React must be updated using their setter functions (like setCount) to trigger re-rendering. Direct assignment does not work.