ComponentPlayground – Maximum update depth exceeded

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle) spectacle@5.2.2

What version of React are you using? (can be found by running npm list react) react@16.6.3

What browser are you using? Chrome@70.0.3538.110

What machine are you on? macOS@10.14.1

Describe the Problem

When using the ComponentPlayground component with custom code an endless update cycle is started.

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.

Like the error message describes the problem, the ComponentPlayground is updating itself due enhancing the scope with Component class from React. When getDerivedStateFrom is comparing both previous scope (inside state) and the new one (from props), it actually compares my custom scope with the enhanced one. This of course will never be true and leads to the endless loop described above.

  static getDerivedStateFromProps(nextProps, prevState) {
    const updatedState = {};
    if (nextProps.code !== prevState.code) {
      const code = (nextProps.code || defaultCode).trim();
      updatedState.code = code;
    }
    if (nextProps.scope !== prevState.scope) {
      const scope = getEnhancedScope(nextProps.scope);
      updatedState.scope = scope;
    }
    return isEmpty(updatedState) ? null : updatedState;
  }

Possible Fix

A possible fix could be to enhance the scope on render when passed to the react-live components. This would make it possible to compare the scope stored in the state with the new one. (Although I really do not see any good reason for the ComponentPlayground to store the code and scope in state anyway.)

I you like I could create a PR with a possible fix. Already created a working ComponentPlayground component for my upcoming presentation.

[dmitrif]

Any update on this? As of right now ComponentPlayground can be considered broken. Thank you in advance.

[ebrillhart]

Thanks for flagging @lennerd! We’ll look into this.