React Destructuring Props

⚛️ React Destructuring Props

Destructuring allows you to extract properties from an object (props) directly into variables, making your code cleaner and easier to read.

 Destructuring in Functional Components

Without Destructuring


 

With Destructuring


 

  • { name, age } is extracted directly from props

  • Cleaner and avoids repeated props.

 Destructuring in Class Components

Without Destructuring

With Destructuring

  • Extract values at the start of render()

  • Makes the JSX cleaner and shorter

 Default Values with Destructuring

You can assign default values while destructuring:


 

 Nested Props Destructuring

If your prop is an object:


 

Or destructure in function parameters:

 Using Destructuring for Children


 

  • children is a special prop for nested content

🎯 Summary

FeatureFunctional ComponentClass Component
Destructuring propsfunction Comp({name, age})const { name, age } = this.props;
Default values{name = "Guest"}const { name = "Guest" } = this.props
Nested props{ user: {name, age} }const { user: {name, age} } = this.props
Children{children}const { children } = this.props

Key Notes:

  • Makes JSX cleaner and easier to read

  • Works with both functional and class components

  • Supports default values and nested destructuring

You may also like...