Question: re-rendering the Value When I pass to Parent Class to Child Class

Question

re-rendering the Value When I pass to Parent Class to Child Class

Answers 1
Added at 2017-11-08 13:11
Tags
Question

I am developing a sample application. Actually when i was Pass the Value Parent Class to Child Class getting in componentWillReceiveProps() method more times re-rendering that Value.

Here this is my Code:

This is my Parent Class:

class ParentClass extends React.Component {
  constructor (props) {
    this.state = {
      BadgeValue: 0,
      setTabVal: false
    }
  }

  getBadgeLength (badgeValue) {
    this.setState({
      badgeLength: badgeValue,
      setTabVal: true
    })
  }

  render () {
    return (
      <ChildClass navigator= {this.props.navigator} getBadgeLength={this.getBadgeLength.bind(this)} />
    )
  }
}

Now I Assumed Child Class: in this Case i am actually Calling for Update Purpose again same Methods calling in componentWillReceiveProps() But, My main Issue more times re-rendering in this scenario.

class ChildClass extends React.Component {
  componentWillReceiveProps () {
    var getBadgeValue = array.length
    this.props.getBadgeLength(getBadgeValue)
  }

  componentWillMount () {
    var getBadgeValue = array.length
    this.props.getBadgeLength(getBadgeValue)
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(array)
    }, () => {
      this.getshopaddressData()
      this.getShopDetails()
    }

  render(){
    return()
  }
}
Answers to

re-rendering the Value When I pass to Parent Class to Child Class

nr: #1 dodano: 2017-11-08 14:11

First of all your method name should be setBadgeLength because its updating the value. Secondly you should pass down badge value down to child class as a prop and then compare it in child class :

shouldComponentUpdate(nextProps) {
  if (this.props.badgeValue != nextProps.badgeValue) {
    return false; // don't update if badgeValue is changing
  } else {
    return true;
  }
}
Source Show
◀ Wstecz