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.

Practice

1. Which of the following best describes the difference between state and props in React?

easy

A. Props can change inside a component; state is fixed.

B. State is internal and can change; props are external and read-only.

C. State and props are both used to pass data from parent to child.

D. Props are used only for styling; state holds all data.

Solution

1. Step 1: Understand what state is

   State is data managed inside a component that can change over time.

2. Step 2: Understand what props are

   Props are data passed from a parent component to a child component and cannot be changed by the child.

3. Final Answer:

   State is internal and can change; props are external and read-only. -> Option B

4. Quick Check:

   State changes internally, props are read-only from parent [OK]

Hint: State changes inside; props come from outside [OK]

Common Mistakes:

• Thinking props can be changed inside the child component
• Confusing state as data passed from parent
• Believing props hold styling only

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a child component Header?

easy

A. <Header title="Hello" />

B. <Header {title: "Hello"} />

C. <Header title={Hello} />

D. <Header title: "Hello" />

Solution

1. Step 1: Recall JSX syntax for passing props

   Props are passed as attributes inside the component tag, like HTML attributes.

2. Step 2: Check correct syntax for string prop

   Use quotes around string values: title="Hello".

3. Final Answer:

   <Header title="Hello" /> -> Option A

4. Quick Check:

   Props use attribute syntax with quotes for strings [OK]

Hint: Use attribute="value" syntax for string props [OK]

Common Mistakes:

• Using curly braces without variable for string
• Using object-like syntax inside JSX tag
• Using colon instead of equals sign

3. Consider this React component code:

function Counter({ initial }) {
  const [count, setCount] = React.useState(initial);
  return <div>Count: {count}</div>;
}

// Usage:
<Counter initial={5} />

What will be displayed when this component renders?

medium

A. Count: 0

B. Count: undefined

C. Count: 5

D. Count: initial

Solution

1. Step 1: Understand prop usage

   The prop initial is passed with value 5 to the Counter component.

2. Step 2: Understand state initialization

   The state count is initialized with initial, so count starts at 5.

3. Final Answer:

   Count: 5 -> Option C

4. Quick Check:

   State initialized from prop value 5 [OK]

Hint: State starts with prop value passed in [OK]

Common Mistakes:

• Assuming state starts at 0 by default
• Printing the prop name instead of value
• Confusing undefined with missing prop

4. What is wrong with this React component code?

function Message(props) {
  props.text = "Hello";
  return <div>{props.text}</div>;
}

medium

A. You cannot assign a new value to props inside a component.

B. The return statement is missing parentheses.

C. The component should use state instead of props.

D. The component must be a class to modify props.

Solution

1. Step 1: Understand props immutability

   Props are read-only and cannot be changed inside the component.

2. Step 2: Identify the error in code

   Assigning props.text = "Hello" tries to modify props, which is not allowed.

3. Final Answer:

   You cannot assign a new value to props inside a component. -> Option A

4. Quick Check:

   Props are immutable inside components [OK]

Hint: Props are read-only; never assign to them [OK]

Common Mistakes:

• Trying to change props directly
• Confusing props with state
• Thinking only class components can modify props

5. You want a component to display a counter that starts from a value passed by its parent and can be incremented by the user. Which approach correctly uses state and props?

hard

A. Modify the prop value directly when user clicks increment.

B. Keep counter value only in props and pass updated props from child to parent.

C. Use props only and update them inside the component.

D. Initialize state with the prop value; update state on user action; do not modify props.

Solution

1. Step 1: Understand data flow

   Props provide initial data from parent; state holds data that changes inside the component.

2. Step 2: Apply correct usage

   Initialize state with prop value, then update state on user actions. Props remain unchanged.

3. Final Answer:

   Initialize state with the prop value; update state on user action; do not modify props. -> Option D

4. Quick Check:

   State changes internally; props stay read-only [OK]

Hint: Use props for initial value, state for changes [OK]

Common Mistakes:

• Trying to change props directly
• Using props to hold changing data
• Passing updated data from child to parent incorrectly