[GH-ISSUE #132] ColorButton: Maximum update depth exceeded #80

New issue

Closed

opened 2026-05-05 11:39:23 -06:00 by gitea-mirror · 1 comment

gitea-mirror commented

2026-05-05 11:39:23 -06:00

Owner

Originally created by @mischnic on GitHub (May 16, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/132

Picking a different color in the dialog causes some sort of infinite loop.

import React, { Component } from 'react';
import { render, App, Window, Area, Box, ColorButton } from './src';

class Main extends Component {
  state = {
    c: 'red',
  };

  render() {
    return (
      <App>
        <Window title="Title" size={{ w: 400, h: 400 }} margined>
          <Box padded>
            <ColorButton
              color="red"
              onChange={({ r, g, b, a }) => {
                console.log(r, g, b, a)
                this.setState({
                  c: `rgba(${r}, ${g}, ${b}, ${a})`
                });
              }}
            />
            {/*<Area>
              <Area.Rectangle
                x="0"
                y="0"
                width="100%"
                height="100%"
                fill={this.state.c}
              />
            </Area>*/}
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Main />);

The above error occurred in the <COLORBUTTON> component:
    in COLORBUTTON (created by Main)
    in VERTICALBOX (created by Box)
    in Box (created by Main)
    in WINDOW (created by Main)
    in APP (created by Main)
    in Main

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
/proton-native/node_modules/fbjs/lib/invariant.js:49
    throw error;
    ^

Invariant Violation: 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 invariant (/proton-native/node_modules/fbjs/lib/invariant.js:42:15)
    at requestWork (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6619:7)
    at scheduleWorkImpl (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6518:11)
    at scheduleErrorRecovery (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6534:5)
    at Set.forEach (<anonymous>)
    at commitRoot (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:5865:29)
    at performWorkOnRoot (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6803:42)
    at performWork (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6753:7)
    at requestWork (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6664:7)
    at scheduleWorkImpl (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6518:11)

Originally created by @mischnic on GitHub (May 16, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/132 Picking a different color in the dialog causes some sort of infinite loop. ```jsx import React, { Component } from 'react'; import { render, App, Window, Area, Box, ColorButton } from './src'; class Main extends Component { state = { c: 'red', }; render() { return ( <App> <Window title="Title" size={{ w: 400, h: 400 }} margined> <Box padded> <ColorButton color="red" onChange={({ r, g, b, a }) => { console.log(r, g, b, a) this.setState({ c: `rgba(${r}, ${g}, ${b}, ${a})` }); }} /> {/*<Area> <Area.Rectangle x="0" y="0" width="100%" height="100%" fill={this.state.c} /> </Area>*/} </Box> </Window> </App> ); } } render(<Main />); ``` ``` The above error occurred in the <COLORBUTTON> component: in COLORBUTTON (created by Main) in VERTICALBOX (created by Box) in Box (created by Main) in WINDOW (created by Main) in APP (created by Main) in Main Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. /proton-native/node_modules/fbjs/lib/invariant.js:49 throw error; ^ Invariant Violation: 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 invariant (/proton-native/node_modules/fbjs/lib/invariant.js:42:15) at requestWork (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6619:7) at scheduleWorkImpl (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6518:11) at scheduleErrorRecovery (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6534:5) at Set.forEach (<anonymous>) at commitRoot (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:5865:29) at performWorkOnRoot (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6803:42) at performWork (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6753:7) at requestWork (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6664:7) at scheduleWorkImpl (/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6518:11) ```