Is there intent to support componentDidCatch and getDerivedStateFromError?

[reactjs]

Is there intent to support componentDidCatch and getDerivedStateFromError?

[bvaughn]

No problem 😄 It's a good question.

Dan pointed out that the react-lifecycles-compat package is primarily intended for library authors (so they can support multiple React versions downstream), and we don't expect it to be common for libraries to define their own error boundaries. (Error boundaries are lightweight and typically application-specific.)

So I think we can close this issue as a non-goal for now!

[bvaughn]

Error boundaries (introduced in v16.0 with componentDidCatch) are not something that can be polyfilled for older versions of React. They're a totally new behavior and not something that could be simulated using pre-existing lifecycles.

I believe it would be possible to polyfill getDerivedStateFromError for v16.0.x-16.5.x using componentDidCatch but I would need to think about it more to be sure.

That being said, it is not as important to polyfill getDerivedStateFromError as it was for getDerivedStateFromProps and getSnapshotBeforeUpdate. Those lifecycles came with deprecation warnings so it was important that we provided library authors with some way of upgrading their components in order to support both older and newer versions of React without cluttering the console with dev warnings.

[BrendanFDMoore]

Hey Brian -- thanks for the quick response!

This is not something I need, but rather was curious about when trying to summarize some highlights from the v16 changelog. It makes sense that the behaviour isn't possible in earlier versions, and agree it isn't as important to back-port the new functionality.

Just for interest, I tried to figure out how the lib worked for the other lifecycles method and arrived at this analogy for getDerivedStateFromError:

export function polyfillDerivedStateFromError(Component){
   var prototype = Component.prototype;

  if (!prototype || !prototype.isReactComponent) {
    throw new Error('Can only polyfill class components');
  }

  if (
    typeof Component.getDerivedStateFromError !== 'function'
  ) {
    return Component;
  }
  
  if (typeof prototype.getDerivedStateFromError === 'function') {
    if (typeof prototype.componentDidCatch !== 'function') {
      throw new Error(
        'Cannot polyfill getDerivedStateFromError() for components that do not define componentDidCatch() on the prototype'
      );
    }

    var componentDidCatch = prototype.componentDidCatch;

    prototype.componentDidCatch = function componentDidCatchPolyfill(
      error,
      info
    ) {
      var stateChange = this.getDerivedStateFromError(error)
      this.setState(stateChange); // Note below
      componentDidCatch.call(this, error, info);
    };
  }
}

I don't think the bound updater function like we see with the polyfilled gDSRP is necessary because prevState isn't needed for gDSFE, but I could be misinterpreting the intent there.

But, as you pointed out, this only works for 16.0-16.5 anyways due to reliance on cDC, and there should not be any major impediment to updating to 16.6 if already on 16.0+.

Feel free to close this if it's not otherwise a goal.

✌️