Tukukkk

I have the following Code:

class Parent extends PureComponent {

    userInformation = {"id" => 3, 

                       "name" => "Sarah", 

                       "Address" => "Palmenweg",

                       // Some more random values

                       }

    render() {

    // Method 1

         return <ComponentWhichOnlyNeedsUserId UserId={this.userInformation.id}>

    // Method 2

         return <ComponentWhichOnlyNeedsUserId UserInformation={this.userInformation}>

    }

}

As you can see, I got a child component which only needs the id of the userInformation, most of the time I split the Object up then(Method 1), however I think this makes my code structure worse, as I got some components in my project which receive 30+ props. I want to restructure my code to always pass in the full object, as this will be cleaner.

Here are my 2 questions:

1. Is there any downside of using method 2 when it comes to performance?
2. Which of the 2 methods would you consider better practice?

Thanks for any answers in advance!

1. In regards to the object being passed to the child component, you are actually passing a reference of the object, so there isn't any real downside to do this from a performance perspective, even if it's a huge object.




2. i personally believe one is not better than the other, as long as you follow the guidelines of not changing the value of props of reference types (should be immutable)

It's good to pass only props which it requires. Because, it might create a set of values for each single component and an extra useless prop might use up some memory. So, better be a miser and send only what it wants :)