CODEWITHSUNDEEP
reactjssockets
citrusvanilla
citrusvanilla

Reputation: 59

RangeError: Maximum call stack size exceeded with initializing react state value with an ES6 new Map() object

I have a top-level React component that is initialized like the following using craco:

class Map extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      // socket: openSocket('http://localhost:5000/test'),
      junction_pos_data: [],
      xpndr_data: [],
      pods_complete_data: new Map(),
    };

For some reason, craco does not like me using the new Map as a React stateful value, even though I use it in children states just fine. The socket connection is commented out, and when I use any other type here, I'm not getting the Range Error either. This is what the console is throwing at me:

Uncaught RangeError: Maximum call stack size exceeded
    at new Map (Map.js:77)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)
    at new Map (Map.js:82)

Any ideas? Thanks!

Upvotes: 0

Views: 562

Answers (1)

Chris B.
Chris B.

Reputation: 5763

Because you named your react component Map, the component is recursively initializing itself and it's causing an infinite loop. Renaming your class component should fix it, and it's generally a good idea to avoid naming classes or variables after reserved words or primitive data/object types (Array, Object, etc.) to prevent unexpected behaviors.

Upvotes: 5

Related Questions