Ползунок реагировать родные элементы является медленным

Question

Проблема в том, что когда я просто использую ползунок только без какого-либо другого кода в приложении, а просто реализую ползунок, тогда в ползунке нет проблем.Но когда я использую ползунок вместе с другим компонентом, то есть на экране много переменных состояния и компонента, тогда ползунок запаздывает, и изменение значения состояния отражается на экране очень поздно.

Я также использую debounceиз lodash, но у меня ничего не вышло, хотя в некоторой степени это устраняет проблему с задержкой, но, поскольку мне приходится обновлять состояние в реальном времени и отображать его на экране, изменение отображаемого на экране значения требует времени.

Пожалуйста, кто-нибудь подскажет, как решить эту проблему.Ниже код HomeScreen.js создает проблему. Приведенный ниже код создает проблему, а ползунок запаздывает, и значение состояния не изменяется мгновенно, т. Е. Оно отражает изменение значения ползунка в последнее время на экране. Я думаю, это связано с компонентом VictoryChart

Чтобы узнать больше о Gif, в чем проблема нажмите здесь

import React, { Component } from 'react'
import {View,StyleSheet,Text,ScrollView} from 'react-native';
import _ from 'lodash';
import { Slider} from 'react-native-elements';
import {VictoryArea,VictoryChart,createContainer,VictoryTheme, VictoryTooltip,VictoryBar} from 'victory-native';
import {Defs,LinearGradient,Stop} from 'react-native-svg';
sampleData=[
  { key:'1',x: 'Jan', y: 5.5, c0: 2,date:'18 Jan 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'2',x: 'Feb', y: 3, c0: 1.5, date:'08 Feb 2019',bank:'Bank Of Baroda',txid:'76jhdg74rh4h848r58'},
  { key:'3',x: 'March', y: 5, c0: 2 ,date:'19 March 2019',bank:'State Bank of India',txid:'76jhdg74rh4h848r58'},
  { key:'4',x: 'Apr', y: 4, c0: 1 ,date:'18 Apr 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'5',x: 'May', y: 6, c0: 2 ,date:'15 May 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'6',x: 'June', y: 2, c0: 4 ,date:'11 June 2019',bank:'Canara Bank',txid:'76jhdg74rh4h848r58'},
  { key:'7',x: 'July', y: 3, c0: 1 ,date:'28 July 2019',bank:'Punjab National Bank',txid:'76jhdg74rh4h848r58'},
]
export default class HomeScreen extends Component{
    static navigationOptions = {
        title:'Annual Employee’s Contribution',
    }
    state = {
        search: '',
        slider:0,
        age:'0',
        value:0,
        overrideSlider:true
      };
    sliderChanger =(slider) =>{
      this.setState({slider})
    }
    render(){
        const VictoryZoomVoronoiContainer = createContainer( "voronoi","cursor");
        return(
            <View style = {styles.container} >
                <ScrollView >
                  <Slider
                    value={this.state.slider}
                    onValueChange={value => {this.sliderChanger(value) }}
                    maximumValue={100}
                    step={1}
                 />
                <Text>Value: {this.state.slider}</Text>
                <View>
              <VictoryChart
                domain={{ y: [0, 7] }}
                theme={VictoryTheme.material}
                containerComponent={
                <VictoryZoomVoronoiContainer
                  labels={(d) => `${d.x}, ${d.y}`}
                  labelComponent={
                  <VictoryTooltip
                      cornerRadius={(d) => d.x > 6 ? 0 : 20}
                      pointerLength={(d) => d.y > 0 ? 5 : 20}
                      flyoutStyle={{
                      stroke: (d) => d.x === 10 ?
                          "tomato" : "black"
                      }}/>}
                  />
                  }
              >
                <Defs>
                  <LinearGradient id="gradientStroke"
                  x1="0%"
                  x2="0%"
                  y1="0%"
                  y2="100%"
                  >
                  <Stop offset="10%" stopColor="#008aefcb" stopOpacity="1" />
                  <Stop offset="100%" stopColor="#52da9c" stopOpacity="0" />
                  </LinearGradient>
                </Defs>
                <VictoryArea
                    data={sampleData}
                    interpolation="cardinal"
                    style={{
                    data: {
                        fill: 'url(#gradientStroke)',
                        stroke: '#1E93FA',
                        strokeWidth: 2
                    }
                    }}
                />
                </VictoryChart>
                </View> 
              </ScrollView>
          </View>
        );
    }
}

Теперь при удалении ползунка VictoryChart работает правильно

import React, { Component } from 'react'
import {View,StyleSheet,Text,ScrollView} from 'react-native';
import _ from 'lodash';
import { Slider} from 'react-native-elements';
import {VictoryArea,VictoryChart,createContainer,VictoryTheme, VictoryTooltip,VictoryBar} from 'victory-native';
import {Defs,LinearGradient,Stop} from 'react-native-svg';
sampleData=[
  { key:'1',x: 'Jan', y: 5.5, c0: 2,date:'18 Jan 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'2',x: 'Feb', y: 3, c0: 1.5, date:'08 Feb 2019',bank:'Bank Of Baroda',txid:'76jhdg74rh4h848r58'},
  { key:'3',x: 'March', y: 5, c0: 2 ,date:'19 March 2019',bank:'State Bank of India',txid:'76jhdg74rh4h848r58'},
  { key:'4',x: 'Apr', y: 4, c0: 1 ,date:'18 Apr 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'5',x: 'May', y: 6, c0: 2 ,date:'15 May 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'6',x: 'June', y: 2, c0: 4 ,date:'11 June 2019',bank:'Canara Bank',txid:'76jhdg74rh4h848r58'},
  { key:'7',x: 'July', y: 3, c0: 1 ,date:'28 July 2019',bank:'Punjab National Bank',txid:'76jhdg74rh4h848r58'},
]
export default class HomeScreen extends Component{

    static navigationOptions = {
        title:'Annual Employee’s Contribution',
    }
    state = {
        search: '',
        slider:0,
        age:'0',
        value:0,
        overrideSlider:true
      };
    sliderChanger =(slider) =>{
      this.setState({slider})
    }
    render(){
        const VictoryZoomVoronoiContainer = createContainer( "voronoi","cursor");
        return(
            <View style = {styles.container} >
                <ScrollView >
                  <Slider
                    value={this.state.slider}
                    onValueChange={value => {this.sliderChanger(value) }}
                    maximumValue={100}
                    step={1}
                 />
                <Text>Value: {this.state.slider}</Text>
                <View>

                </View> 
              </ScrollView>
          </View>
        );
    }
}
const styles = StyleSheet.create({
container:{
    backgroundColor:'#f8f8f8',
    flex:1
},
})