I add the React Native Slider component to an existing application and prefer to use it onValueChange prop so that as the user slides the handle left and right, a pair of text components updates their values in response to the current value of the slider.
At the first attempt, this causes a significant delay after releasing the slider control. StackOverflow does not allow me to embed gif here, so I will leave a link: http://imgur.com/sEowpZt
When I comment on onValueChange and use onSlidingComplete instead, there is no lag at all, but the two text components will not update their values until the sliding action stops, which will reduce the effect. My suspicion is that setState calls inside onValueChange accumulate faster than when they are processed / terminated, and this has something to do with other parts of my application. To confirm this, I created a new application for native applications via react-native init , added that the same _renderNameYourPriceModal() to the code, turned on a button on the screen to open it, and found that there was no lag at all: http: // imgur.com/iZnvDML
How to determine what slows down setState calls for my existing application? I discovered the React Perf tool and use it to print a pivot table in the Chrome dev console.
import Perf from 'react-native/Libraries/Renderer/shims/ReactPerf' ... componentDidMount() { setTimeout(() => { Perf.start() setTimeout(() => { Perf.stop() const measurements = Perf.getLastMeasurements() Perf.printWasted(measurements) }, 7000) }, 1000) }
According to Perf docs for printWasted :
printWasted ()
Perf.printWasted(measurements)
The most useful part of the profiler.
"Spent" time is spent on components that did not actually display anything, for example. the rendering remained the same, so the DOM was not affected.
But I'm not sure how to interpret the results in order to make the necessary changes. For example, the first four rows of this table when starting my application (24 lines in total) look like this:
I don’t know what kind of first row, "ItemDetailsScreen > View" inside the Owner > Component column, refers to the fact that there are only 20+ views on this screen. For future use, I use React-Navigation, and this is a sub-screen inside the StackNavigator, although I do not see how updates to this screen state can lead to re-display on screens in the hierarchy. Do I need to split this screen again into more custom subcomponents so that I redefine shouldComponentUpdate , or printWasted results printWasted show exactly which areas are to blame?
Here is the function I have for returning a Modal with a Slider inside:
_renderNameYourPriceModal() { var likelihood = 'Possible' var lowestVal = 5 var highestVal = 15 if (this.state.nypValue < 6) { likelihood = 'Nearly Impossible' } else if (this.state.nypValue < 8) { likelihood = 'Highly Unlikely' } else if (this.state.nypValue < 10) { likelihood = 'Unlikely' } return ( <Modal onRequestClose={() => { this.setState({nypModalVisible: false})}} animationType={"fade"} transparent={true} visible={this.state.nypModalVisible}> <View style={{paddingTop: 22, height: Dimensions.get('window').height, backgroundColor: 'rgba(252,84,102,0.9)', alignItems: 'center', justifyContent: 'center'}}> <View style={{ height: Dimensions.get('window').height * 0.5, width: Dimensions.get('window').width * 0.9, backgroundColor: 'white', borderRadius: 10, alignItems: 'center' }}> <View style={{flex: 0.8, alignItems: 'center', justifyContent: 'center'}}> <View style={{flex: 0.25, flexDirection: 'row', width: Dimensions.get('window').width * 0.97, top: -10, alignItems: 'flex-start', justifyContent: 'center'}}> <View style={{flex: 0.1}}></View> <View style={{flex: 0.8, alignSelf: 'center', alignItems: 'center', justifyContent: 'center'}}> <Text style={{fontSize: 23}}>Name Your Price</Text> </View> <View style={{flex: 0.1, top: -5, height: 40, alignItems: 'flex-end', justifyContent: 'flex-end'}}> <TouchableHighlight underlayColor={'gray'} style={{height: 40, width: 40, backgroundColor: 'gray', borderRadius: 20, alignItems: 'center', justifyContent: 'center'}} onPress={() => { // close this.setState({nypModalVisible: false}) }}> <Text style={{fontSize: 25, color: 'white'}}>X</Text> </TouchableHighlight> </View> </View> <View style={{flex: 0.25, width: Dimensions.get('window').width * 0.8, alignItems: 'center', justifyContent: 'flex-start'}}> <View style={{flex: 0.5, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}> <View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}> <Text style={{fontSize: 19}}>${lowestVal.toFixed(2)}</Text> </View> <View style={{flex: 0.6, alignItems: 'center', justifyContent: 'center'}}> <Slider style={{width: Dimensions.get('window').width * 0.5}} maximumValue={15} minimumValue={5} step={0.5} value={this.state.nypValue} // onSlidingComplete={(val) => { // this.setState({nypValue: val}) // }} onValueChange={(val) => { // change value here this.setState({nypValue: val}) }} /> </View> <View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}> <Text style={{fontSize: 19}}>${highestVal.toFixed(2)}</Text> </View> </View> <Text>${this.state.nypValue.toFixed(2)}</Text> <Text>Likelihood: {likelihood}</Text> </View> <View style={{flex: 0.5, paddingTop: 20, alignItems: 'center', justifyContent: 'flex-start', paddingHorizontal: 10}}> <Text style={{textAlign: 'center', top: 25, fontSize: 18}}>Let us know the price you'd like to see this item drop to, and we'll let YOU know when it does!</Text> </View> </View> <View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}> <TouchableHighlight style={{height: 50, width: Dimensions.get('window').width * 0.8, alignItems: 'center', justifyContent: 'center', backgroundColor: '#70a8ff', borderRadius: 5}} underlayColor={'#70a8ff'} onPress={() => { }}> <Text style={{fontSize: 20, color: 'white'}}>Set Price Alert</Text> </TouchableHighlight> </View> </View> </View> </Modal> ) }