Question 294050 in CSS Question posted in
Some basic documentation can be found here.

Dynamically changing in-line CSS in React

I’m encountering an issue where this error occurs: Warning: Maximum update depth exceeded.

I am using a color picker to change the CSS of of one of my components dynamically, so every time the color changes, it cause a re-render, which I believe is the reason the error is occurring. Below is an example of what would cause the error:

const card = () => {
    const [color, setColor] = useState('#FFF')

    return (
      <>
        <Box sx={{backgroundColor: color}}>
           some content
        </Box>
        
        <ColorPicker
           value={color}
           onChange={setColor}
        />
     </>
    )
}

The specific color picker I am using is this one: react-gradient-color-picker. Any assistance is appreciated.

Tags:

2

Answers


  1. 0

    It’s likely you’ve imported the wrong component. The code you provided should work just right.

    import ColorPicker from "react-best-gradient-color-picker";

    It’s also possible that the Box component is the cause of the error message, so perhaps try to pass the style object as React CSS Properties, rather than through the SX Prop:

    <Box style={{ backgroundColor: color }}>{content}</Box>
    Login or Signup to reply.
  2. 0

    Continuous hovering over the colors to choose the desired color from the color picker leads to many state changes and, correspondingly, triggers the warning: ‘Maximum update depth exceeded.

    Use debounce and useCallback hook

      import debounce from 'lodash.debounce';
  const debouncedSetColor = use callback(
    debounce((newColor) => {
      setColor(newColor);
    }, 300), // Adjust the debounce delay
    []
  );

  const handleColorChange = (newColor) => {
    debouncedSetColor(newColor);
  };


  <ColorPicker value={color} onChange={handleColorChange}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search