Styjun

I wonder which way of assigning props which are going to be passed to a child component is correct (both in React correctness (syntax, common practices) and also efficiency), and if there is a much better way of achieveing this, please let me know.

So, currently in my project I have a parent component which gets some data and pass it to a child (I'm actually going to encapsulate it even further and have a child gets the data, but I'm still curious about the proper solution).

My code is something like this:

class Dashboard extends Component 

 constructor(props) 
 super(props)

 this.state = 
 a: 'foo',
 b: 'bar',
 stats: 
 c: 'c',
 d: 'd'
 
 
 

 someFunction = () => 

 

 render() 
 let childData = this.state.stats
 childData.function = this.someFunction

 return (
 <div>
 <ChildComponent ...childData/>
 </div>
 )
 

As you may see I assign all the data for the child component inside render(), and there is no specific reason for it really. I've seen this on one video on Lynda, while watching React stuff and I liked it. I believe I could just do this:

constructor(props) 
 super(props)

 this.state = 
 a: 'foo',
 b: 'bar',
 stats: 
 c: 'c',
 d: 'd'
 
 

 let childData = this.state.stats
 childData.function = this.someFunction 

I would like to know which of those, if any, is more "react" way of doing this, or is there a better way? Am I right thinking that there may be a performance issue, with those data being assigned every single time the parent component is rendered? If so, is this going to be minimized if I move the logic to constructor, so the assignment happens only once?

Thanks for help!

So I would say neither of those options are "the React way". Taking your exact component I would say the following is most common:

class Dashboard extends Component 
 constructor(props) 
 super(props)

 this.state = 
 a: 'foo',
 b: 'bar',
 stats: 
 c: 'c',
 d: 'd',
 ,
 
 

 someFunction = () => 

 render() 
 return (
 <div>
 <ChildComponent
 stats=this.state.stats
 handleSomeEvent=this.someFunction
 />
 </div>
 )
 

However that is only the most common way pre version 16.8. The most common way now would be this instead:

function Dashboard() 
 const [state, setState] = useState(
 a: 'foo',
 b: 'bar',
 stats: 
 c: 'c',
 d: 'd',
 ,
 )

 const someFunction = () => 

 return (
 <div>
 <ChildComponent 
 stats=state.stats 
 handleSomeEvent=someFunction 
 />
 </div>
 )

Yes it can be a correct way.

The expensive part is manipulating the DOM. The performance hit is mitigated by React and you can go a long way to help by using PureComponent or the memo function to declare your child component.

Pure components and memoized functional components do a shallow compare and are only re-rendered if the shallow compare fails. The shallow compare is done in shouldComponentUpdate for PureComponent. You can also implement your own shouldComponentUpdate function in a "normal" Component. If this returns false your child component will not re-render.

So to reiterate.
Does assigning properties to child components create overhead - Yes, however, this is not a lot compared to the other overhead your application will face.

As for a non-React specific answer. Code should be readable and understandable. Creating an intermediate object just to destructure it does not make a lot of sense.

So this:

let childData = this.state.stats
childData.function = this.someFunction

Is not really needed. Rather assign directly to your component