Props destructuring in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is props destructuring in React?

Props destructuring is a way to extract specific properties from the props object directly in the function parameters or inside the component, making the code cleaner and easier to read.

beginner

How do you destructure props in a React functional component's parameter?

You can write the component function like this: <code>function MyComponent({ title, subtitle }) { ... }</code> instead of <code>function MyComponent(props) { ... }</code> and then accessing <code>props.title</code> and <code>props.subtitle</code>.

beginner

Why is props destructuring helpful?

It makes the code shorter and clearer by avoiding repeated props. prefixes. It also helps to see which props the component expects at a glance.

intermediate

Show an example of destructuring props inside the component body.

Inside the component, you can write: <code>const { title, subtitle } = props;</code> to extract the props, then use <code>title</code> and <code>subtitle</code> directly.

intermediate

Can you destructure nested props? Give an example.

Yes. For example, if props has a user object: <code>function Profile({ user: { name, age } }) { ... }</code> extracts <code>name</code> and <code>age</code> from <code>user</code> directly.

How do you destructure props in a React functional component parameter?

A function MyComp({ title, subtitle }) { ... }

B function MyComp(props.title, props.subtitle) { ... }

C function MyComp(props) { const title = props.title; }

D function MyComp() { const { title, subtitle } = this.props; }

Option A shows correct destructuring directly in the function parameter.

What is the benefit of destructuring props?

A It makes code longer and harder to read.

B It avoids repeating 'props.' and clarifies expected props.

C It disables prop validation.

D It automatically sets default props.

Destructuring helps by avoiding repeated 'props.' and shows expected props clearly.

Which syntax correctly destructures nested props?

A function Comp(props) { const { user.name, user.age } = props; }

B function Comp({ user.name, user.age }) { ... }

C function Comp({ user: { name, age } }) { ... }

D function Comp(props) { const name = props.user.name; }

Option C shows correct nested destructuring in the parameter.

Where else can you destructure props besides the function parameter?

A You cannot destructure props anywhere else.

B Only in the render method.

C Only in class components.

D Inside the component body using const { } = props;

You can destructure props inside the component body using const assignment.

What happens if you forget to destructure props and use props.title directly?

A You can still access props.title but code is less clean.

B You must destructure props to access any prop.

C The component will not render.

D React throws an error.

You can access props.title directly without destructuring, but destructuring makes code cleaner.

Explain how to use props destructuring in a React functional component and why it is useful.

Think about how you can write function parameters to get props directly.

Describe how to destructure nested props and give a simple example.

Consider a prop like user with name and age inside.