Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[Gjoshi3107]

Issue:--

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at scheduleWork(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:5653:5)
at enqueueSetState(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:2175:5)
at setState(node_modules/react/cjs/react.production.min.js:12:369)
at componentDidUpdate(node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js:370:12)
at commitLifeCycles(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:5005:24)
at Ml(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6457:13)
at Ml([native code])
at runWithPriority(node_modules/scheduler/cjs/scheduler.production.min.js:19:467)
at commitRoot(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6337:3)
at performSyncWorkOnRoot(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:5990:3)
at Tl([native code])
at b(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1797:25)
at runWithPriority(node_modules/scheduler/cjs/scheduler.production.min.js:19:467)
at flushSyncCallbackQueueImpl(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1794:7)
at flushSyncCallbackQueue(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1786:3)
at batchedUpdatesImpl(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7569:41)
at batchedUpdates(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:957:12)
at _receiveRootNodeIDEvent(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:988:3)
at apply(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1022:5)
at __callFunction(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:27)
at fn(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:12)
at __guard(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:9)
at value(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:10)
at value([native code])

Code Used

import MultiSlider from '@ptomasroos/react-native-multi-slider';
import React, { useState } from 'react';
import { View } from 'react-native';
...
import { CustomMarkerBottom, CustomMarkerTop } from './MultiSliderMarkers';

let minValueSelected = null;
let maxValueSelected = null;

const Component = (props) => {
  ...
  const checkForMinPriceFilter = (value = 0) => Math.min(value, 1500000);

  return (
    <View style={{ paddingHorizontal: 20, flex: 1 }}>
      <View style={{ display: showPrice }}>
         ...
        <View style={styles.multiSliderContainerView}>
          <MultiSlider
            key="price_multi_slider"
            vertical
            snapped
            enabledOne
            enabledTwo
            isMarkersSeparated
            values={
              [parseInt(minValueSelected ?? minValue, 10), parseInt(maxValueSelected ?? maxValue, 10)]
            }
            sliderLength={220}
            selectedStyle={styles.multiSliderSelected}
            unselectedStyle={styles.multiSliderUnSelected}
            containerStyle={styles.multiSliderContainer}
            onValuesChangeFinish={(values: any) => {
            ...
            }}
            onValuesChange={(values: any) => {
              const [lower = minValue, upper = maxValue] = values;
              minValueSelected = lower;
              maxValueSelected = upper;
            }}
            min={minValue}
            max={maxValue}
            step={stepValue}
            allowOverlap={false}
            trackStyle={{ height: 2, borderRadius: 3 }}
            customLabel={() => <SvgIcons.SliderMarkerLowerValue />}
            customMarkerLeft={() => CustomMarkerBottom(formatAmountToPrice(minValueSelected ?? minValue))}
            customMarkerRight={() => CustomMarkerTop(formatAmountToPrice(maxValueSelected ?? maxValue))}
          />
        </View>
        ...
      </View>
    </View>
  );
};

export { Component };

import React from 'react';
import { ImageBackground, View, Text } from 'react-native';
import styles from './style';
import SvgIcons from '../../../../icons/svgs';

const CustomMarkerBottom = (value) => (
  <View style={{ transform: [{ rotate: '90deg' }] }}>
    <View style={styles.outerCircleVariant} />
    <SvgIcons.CustomMarker style={[styles.customMarkerLabel2, styles.customMarkerLabel]} />
    <View style={[styles.customMarkerLabel2, styles.customMarkerLabel, {
      zIndex: 10, left: 45, top: -2,
    }]}
    >
      <Text key={value} style={styles.customMarkerLabelText}>{value}</Text>
    </View>
  </View>
);

const CustomMarkerTop = (value) => (
  <View style={{ transform: [{ rotate: '90deg' }] }}>
    <View style={styles.outerCircleVariant} />
    <SvgIcons.CustomMarker style={[styles.customMarkerLabel2, styles.customMarkerLabel, { transform: [{ scaleY: -1 }] }]} />
    <View style={[styles.customMarkerLabel2, styles.customMarkerLabel, {
      zIndex: 10, left: 45, top: -2,
    }]}
    >
      <Text key={value} style={styles.customMarkerLabelText}>{value}</Text>
    </View>
  </View>
);

export { CustomMarkerBottom, CustomMarkerTop };

const CustomMarker = (props) => (
  <Svg
    width={100}
    height={24}
    viewBox="0 0 100 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <Path
      d="M3.41 4.153A5 5 0 018.338 0H95a5 5 0 015 5v14a5 5 0 01-5 5H0L3.41 4.153z"
      fill="#205C8C"
    />
  </Svg>
);

Steps to Reproduce

We are unable to reproduce it by following any specific steps.
But it is only occurring after we started implementing the Custom Marker so as to keep the new label as well.

Actual Behavior

Build is crashing due to max update depth exceeded.

[alielmajdaoui]

Usually this happens when you typing too fast and setting a field value in the state. The same here if you move the marker too fast. One technique to solve this is to use a debouncer.

[AustinWood]

I've encountered same issue and this happens when value props value contains null value and it causes app crash.
double check if values array contains null value like simple below

<MultiSlider
      values=[firstValue || 0, secondValue || 0]
      ...
/>

[manarfalah]

having this issue also, is there any solution for it ?

[hrastnik]

This can happen when some props are passed illegal values. In my case the issue was that the max prop is was set to NaN instead of a number.

Internally the library checks if props.max === prevProps.max and it always returns false when max is NaN and proceeds to call setState indefinitely.

[akashdoddmaniedufund]

This can happen when some props are passed illegal values. In my case the issue was that the max prop is was set to NaN instead of a number.

Internally the library checks if props.max === prevProps.max and it always returns false when max is NaN and proceeds to call setState indefinitely.

You saved me! 🚀