DEV Community

Cover image for React, Vue and Svelte: Comparing destructuring Props
Clément Creusat
Clément Creusat

Posted on

 

React, Vue and Svelte: Comparing destructuring Props

Destructuring props in...

When it comes to ES6+, Object and JavaScript, you can use the destructuring method and it works the same because it is just ... well, JavaScript!

Check it out 🚀

React

Link

// Parent Component
<ChildComponent {...user} />
// or
<ChildComponent user={user} />

const Component = ({id, name, lastname}) => {
  return <div id={id}>{name}{lastname}</div>
}
Enter fullscreen mode Exit fullscreen mode

Vue

Link

const props = defineProps({
  user: Object
})
let { id, name, lastname } = props.user;
<template>
<div>{{ id }} {{ name }}</div>
</template>
Enter fullscreen mode Exit fullscreen mode

Svelte

Link

// Parent Component
<ChildComponent {...user} />

// Child Component
export let name;
export let lastname;
export let id;

<div>{name} {lastname} {id}</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.