React: Does it make sense to pass the whole state to another component?

Question

I'm working on refractoring a medium size app, around 20k lines of code distributed in 20 components. The whole state of the app covers more than 200 properties and to be be faster I built the app by passing the whole state to my child components. Now I'm concerned about the speed of the page.

I wanted to have short and readable components. If I decide to pass single properties I will have some components with 50 properties or more. Does it make sense to do that in order to gain speed?

Thanks for the help

Answer 1

From pattern point of view it is much cleaner to use global state management like redux to share states between components than passing state to child. In some other cases the solution is even easier and still not require passing states.

Answer 2

YES

React will only render the changes that have been made since the last render, if parts of your child elements haven't been modified they will not be re-rendered to the DOM.

as an example this:

  <Content
        accounts={this.state.accounts}
        showBalance={this.state.showBalance}
        withdraw={this.state.withdraw}
        deposit={this.state.deposit}
        current={this.state.current}
        depositAmount={this.state.depositAmount}
        handleDeposit={this.state.handleDeposit}
        handleRm={this.state.handleRm}
        amounts={this.state.amounts}
        getWithdraw={this.state.getWithdraw} 
  />

could be replaced with

<Content {...this.state} />