CODEWITHSUNDEEP
javascriptreactjsreact-native
Andrew Young
Andrew Young

Reputation: 734

react-native: How to stop tab from re-rendering?

So I sent a function as a prop to one of my tabs, but now the tab is destroyed and re-rendering every time that function is called.

I've messed around with shouldComponentUpdate() quite a bit to no avail, because the component is destroyed when the function is called.

How should I go about this? The function in question is "Buy". Thanks!

  <Tab.Screen
     name="Buy"
     component={() => (
     <Buy addToCartParent={(newCartNum) => this.addToCart(newCartNum)} />
     )}
   />
   <Tab.Screen name="About" component={About} />


...


addToCart(newCartNum) {
    this.setState({
      cartNum: newCartNum,
    });
  }

Upvotes: 0

Views: 827

Answers (1)

jc28
jc28

Reputation: 1882

I don't know what you would like to achieve, but try to help you. Better don't use lambda function in the render, because every time react makes a new object and it means more re-render and all react magic is losing in this case. But in your case maybe you could do like this:

Make a separate render:

renderBuyComponent() {
  return (
    <Buy addToCartParent={this.addTocart} />
  )
}

addToCart = (newCartNum) => {
  this.setState({
     cartNum: newCartNum,
  });
}


return (
  <Tab.Navigator>
    <Tab.Screen name="Buy" component={this.renderBuyComponent()} />
    <Tab.Screen name="About" component={About} />
  </Tab.Navigator>
)

Upvotes: 1

Related Questions