componentWillUpdate > nextProps.children is always null?

[rejhgadellaa]

I'm trying to unobserve() child elements that are about to be removed so the observer doesn't hold a reference to the element after it's removed from the DOM.

It's very possible I'm going about this all wrong, but the idea is to compare the elements in props.children with nextProps.children:

componentWillUpdate(nextProps, nextState) {

  const childElements = toChildArray(this.props.children).map( c => c.__e );
  const nextChildElements = toChildArray(nextProps.children).map( c => c.__e );

  // Unobserve children that (will) no longer exist
  childElements.forEach( elem => {
    if (!nextChildElements.includes(elem))
      this._unobserve( elem );
  });

}

But from what I can see, nextChildElements is always an array containing null value(s), at least in the first call (right after componentDidMount where props.children does have element(s).

It feels like a bug but maybe this is working as intended?

[rejhgadellaa]

Ok, after more debugging and looking at the data nextProps.children contains during componentWillUpdate(), I think I can answer my own question.

When componentWillUpdate() is called, Preact doesn't (yet) know / isn't concerned if the element will change, so it's null. I assume it's set somewhere during render().

So you can't use componentWillUpdate() to compare current child elements vs next child elements.

Makes sense, I guess :)