Props as read-only data in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in React?

Props are inputs to React components. They are used to pass data from a parent component to a child component.

beginner

Why should props be treated as read-only in React?

Props should not be changed inside the child component because React relies on props being stable to manage component updates predictably.

intermediate

What happens if you try to modify props directly inside a React component?

Modifying props directly can cause bugs and unexpected behavior because React expects props to be immutable and controlled by the parent component.

intermediate

How can a child component update data passed via props?

A child component can call a function passed as a prop from the parent to request changes. The parent then updates its state and passes new props down.

beginner

Explain the difference between props and state in React.

Props are read-only data passed from parent to child. State is data managed inside a component that can change over time.

In React, can a component modify its own props directly?

A Yes, props can be changed anytime inside the component

B Only if the component is a class component

C No, props are read-only and should not be modified

D Only if the component uses useState hook

Props are read-only data passed from parent to child and should never be modified inside the child component.

How does a child component request a change to data passed via props?

A By directly changing the prop value

B By calling a function passed as a prop from the parent

C By using the useState hook inside the child

D By using the useEffect hook

The child calls a function passed as a prop to notify the parent to update its state, which then updates the props.

What is the main reason React treats props as immutable?

A To keep data flow predictable and components pure

B To improve performance by avoiding unnecessary re-renders

C To allow components to share state

D To enable two-way data binding

Immutable props keep data flow predictable and help React manage component updates reliably.

Which of the following is true about props and state?

A Props are read-only, state can be changed inside the component

B State is passed from parent to child, props are internal

C Props can be changed by the component, state cannot

D Both props and state are read-only

Props are read-only inputs from parent, while state is internal data that a component can change.

If a parent component changes its state, what happens to the props of its child components?

A Props become mutable

B Props remain the same until the child updates them

C Props are deleted and recreated

D Props automatically update to reflect the new state

When the parent state changes, it passes new props to children, causing them to re-render with updated data.

Explain why props in React are considered read-only and how this affects component design.

Think about how data flows in React and why stability matters.

Describe how a child component can update data it receives via props without modifying props directly.

Focus on the communication between parent and child.

Practice

1. In React, what does it mean that props are read-only?

easy

A. You cannot change props inside the child component.

B. You can modify props directly in the child component.

C. props are only used for styling components.

D. props are used to store component state.

Solution

1. Step 1: Understand the role of props

   Props are data passed from a parent component to a child component in React.

2. Step 2: Recognize props immutability

   Props are read-only, meaning the child component cannot change them directly.

3. Final Answer:

   You cannot change props inside the child component. -> Option A

4. Quick Check:

   Props are read-only = D [OK]

Hint: Remember: props come from parent, child can't change them [OK]

Common Mistakes:

• Trying to modify props directly inside child component
• Confusing props with state
• Thinking props are for styling only

2. Which of the following is the correct way to access a prop named title inside a functional component?

easy

A. const title = this.props.title;

B. const title = getProps.title;

C. const title = state.title;

D. const title = props.title;

Solution

1. Step 1: Identify functional component syntax

   In functional components, props are passed as a parameter named props.

2. Step 2: Access prop correctly

   You access a prop by props.title. Using this.props is for class components.

3. Final Answer:

   const title = props.title; -> Option D

4. Quick Check:

   Functional component props access = B [OK]

Hint: Use props.parameterName inside functional components [OK]

Common Mistakes:

• Using this.props in functional components
• Confusing state with props
• Trying to use undefined variables like getProps

3. What will be the output of this React component?

function Greeting(props) {
  props.name = "Alice";
  return <h1>Hello, {props.name}!</h1>;
}

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

medium

A. Hello, Bob!

B. Hello, Alice!

C. Error: Cannot assign to props.name

D. Hello, undefined!

Solution

1. Step 1: Understand props mutability

   Although props are read-only and mutating them is an anti-pattern, JavaScript allows changing the object property within the component function.

2. Step 2: Determine rendered output

   The assignment props.name = "Alice" mutates the value before the return, so the output is "Hello, Alice!".

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Props mutation affects render output = B [OK]

Hint: Mutating props technically works but violates React's read-only principle [OK]

Common Mistakes:

• Thinking props mutation doesn't affect output
• Expecting an error from assignment
• Confusing props with state

4. Identify the error in this React functional component:

function Counter(props) {
  props.count = props.count + 1;
  return <div>Count: {props.count}</div>;
}

medium

A. Props are being mutated directly, which is not allowed.

B. The component should use this.state instead of props.

C. The return statement is missing parentheses.

D. The component should not return JSX.

Solution

1. Step 1: Check for props mutation

   The line props.count = props.count + 1; tries to change props directly, which is not allowed.

2. Step 2: Understand correct data handling

   Props are read-only; to change data, use state or callbacks, not direct mutation.

3. Final Answer:

   Props are being mutated directly, which is not allowed. -> Option A

4. Quick Check:

   Direct props mutation = error = A [OK]

Hint: Never assign to props; use state for changes [OK]

Common Mistakes:

• Trying to mutate props directly
• Confusing props with state usage
• Ignoring React's immutability rules

5. You want to create a component that shows a user's name and allows updating it inside the component. Which approach correctly respects that props are read-only?

hard

A. Modify the props.name directly inside the component to update the name.

B. Use a global variable to store the name and ignore props.

C. Copy props.name to a state variable and update the state to change the name.

D. Pass a new name prop from the child component to the parent.

Solution

1. Step 1: Understand props immutability

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

2. Step 2: Use state for data that changes

   Copy the prop value to a state variable, then update the state to reflect changes.

3. Final Answer:

   Copy props.name to a state variable and update the state to change the name. -> Option C

4. Quick Check:

   Use state to update data, not props = C [OK]

Hint: Use state for changes, keep props read-only [OK]

Common Mistakes:

• Trying to change props directly
• Using global variables instead of state
• Passing props from child to parent (not possible)