Skip to content

Editor: event listeners never cleaned up on unmount, deprecated componentWillUpdate #3962

@avinxshKD

Description

@avinxshKD

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

client/modules/IDE/components/Editor/index.jsx has been leaking event
listeners since forever. Line 1 even has a TODO to convert it to a
functional component, so this has been known but nobody fixed the leaks.

Problems:

  1. componentDidMount registers click, keydown, and change (debounced)
    listeners on the CodeMirror instance. componentWillUnmount only removes
    keyup. The rest are gone forever. click and keydown are anonymous arrow
    functions so they can't even be removed with .off() as-is.
componentWillUnmount() {
  if (this._cm) {
    this._cm.off('keyup', this.handleKeyUp); // only this gets cleaned up
  }
  this.props.provideController(null);
}

  1. componentWillUpdate (line ~260) is deprecated since React 16.3.
    componentDidUpdate already exists, the logic should just move there.

  2. The debounced change handler is never cancelled on unmount, so it can
    fire after the component is gone.

Fix:

  • Convert anonymous listeners to named methods so they can be properly
    unregistered
  • Cleanup all listeners in componentWillUnmount
  • Move componentWillUpdate logic into componentDidUpdate
  • Cancel debounced handler on unmount

Metadata

Metadata

Assignees

No one assigned

    Labels

    Awaiting Maintainer ApprovalNeeds review from a maintainer before moving forwardBugError or unexpected behaviors

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions