CODEWITHSUNDEEP
reactjs
Tarlen
Tarlen

Reputation: 3797

Component not being unmounted

I am trying to write a React mixin that creates a few keybindings to easily scroll list views, however, I have problems with removing the event listeners after the component has been removed from the DOM

Mixin:

componentDidMount: function() {
    var requiredFunction = Object.getPrototypeOf(this).keyedList;
    if (!_.isFunction(requiredFunction)) {
      console.log('[KeyedListMixin] You must define the keyedList() function');
    }

    $(document).on('keydown', this.__handleKeyDown);
  },

  componentDidUnMount: function() {
    $(document).off('keydown', this.__handleKeyDown);
  },

render:

if (showNewCommentWindow) {
      centeredWindow   = (
        <FixedView>
          <div className='new-comment-window'>
            <NewResourceWindow
              listObjects       = {searchResults}
              onSearchItemClick = {this._handleSearchItemClick}
              handleOnChange    = {this._handleSearchChange}
              />
          </div>
        </FixedView>
      )
    }
return (
   ....
   {centeredWindow}
   ....

But once showNewCommentWindow is false, and as a result, the FixedView doesn't get rendered, the component don't unmount for some reason.

Upvotes: 0

Views: 766

Answers (1)

Anders Ekdahl
Anders Ekdahl

Reputation: 22933

The lifecycle method isn't called componentDidUnMount, it's called componentWillUnmount. Two important differences where the casing is Unmount and not UnMount and that it's Will and not Did. If it was called componentDidUnmount the component would have already been unmounted and the reference to the DOM node would have been released. So you clean up any DOM related things in componentWillUnmount just before the component is unmounted.

Upvotes: 4

Related Questions