Search code examples
javascriptreactjsobject-destructuringreact-functional-component

Does object destructing uses more memory if i use it in most of the components?


Let's say i have this component,

export default function Xyz(props) {
   ...
}

If i use object destructing,

export default function Xyz({x, y, z}) {
   ...
}

I want know that if i use the destructing method for every method for every function component and also in render method of traditional component, will it uses is more memory or will it take little load because of the so many consts or lets variable in application.

is there any tool or something so can measure this thing ? or someone just did that already ? i would like to understand how dose it works actually.


Solution

  • As @CertainPerformace mentioned, I think that it should not matter anyway. Because, we will be transpiling it to es5/3 either way using babel/webpack/typescript as it will be used inside the browser.

    js

    // this becomes
    export default function Xyz({x, y, z}) {
        // ...
    }
    // this
    export default function Xyz(options) {
        var x = options.x;
        var y = options.y;
        var z = options.z;
        // All logic 
    }
    

    So, I guess it won't matter as long as the code is designed to run in the browser. Hope it helps :)