diff --git a/compat/src/render.js b/compat/src/render.js index 302d19589e..b643f18654 100644 --- a/compat/src/render.js +++ b/compat/src/render.js @@ -39,33 +39,6 @@ const onChangeInputType = type => /fil|che|rad/.test(type); // Some libraries like `react-virtualized` explicitly check for this. Component.prototype.isReactComponent = {}; -// `UNSAFE_*` lifecycle hooks -// Preact only ever invokes the unprefixed methods. -// Here we provide a base "fallback" implementation that calls any defined UNSAFE_ prefixed method. -// - If a component defines its own `componentDidMount()` (including via defineProperty), use that. -// - If a component defines `UNSAFE_componentDidMount()`, `componentDidMount` is the alias getter/setter. -// - If anything assigns to an `UNSAFE_*` property, the assignment is forwarded to the unprefixed property. -// See https://github.com/preactjs/preact/issues/1941 -[ - 'componentWillMount', - 'componentWillReceiveProps', - 'componentWillUpdate' -].forEach(key => { - Object.defineProperty(Component.prototype, key, { - configurable: true, - get() { - return this['UNSAFE_' + key]; - }, - set(v) { - Object.defineProperty(this, key, { - configurable: true, - writable: true, - value: v - }); - } - }); -}); - /** * Proxy render() since React returns a Component reference. * @param {import('./internal').VNode} vnode VNode tree to render diff --git a/compat/test/browser/component.test.js b/compat/test/browser/component.test.js index de78a1fd20..9aecf754bc 100644 --- a/compat/test/browser/component.test.js +++ b/compat/test/browser/component.test.js @@ -75,169 +75,4 @@ describe('components', () => { children: 'second' }); }); - - describe('UNSAFE_* lifecycle methods', () => { - it('should support UNSAFE_componentWillMount', () => { - let spy = sinon.spy(); - - class Foo extends React.Component { - // eslint-disable-next-line camelcase - UNSAFE_componentWillMount() { - spy(); - } - - render() { - return

foo

; - } - } - - React.render(, scratch); - - expect(spy).to.be.calledOnce; - }); - - it('should support UNSAFE_componentWillMount #2', () => { - let spy = sinon.spy(); - - class Foo extends React.Component { - render() { - return

foo

; - } - } - - Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillMount', { - value: spy - }); - - React.render(, scratch); - expect(spy).to.be.calledOnce; - }); - - it('should support UNSAFE_componentWillReceiveProps', () => { - let spy = sinon.spy(); - - class Foo extends React.Component { - // eslint-disable-next-line camelcase - UNSAFE_componentWillReceiveProps() { - spy(); - } - - render() { - return

foo

; - } - } - - React.render(, scratch); - // Trigger an update - React.render(, scratch); - expect(spy).to.be.calledOnce; - }); - - it('should support UNSAFE_componentWillReceiveProps #2', () => { - let spy = sinon.spy(); - - class Foo extends React.Component { - render() { - return

foo

; - } - } - - Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillReceiveProps', { - value: spy - }); - - React.render(, scratch); - // Trigger an update - React.render(, scratch); - expect(spy).to.be.calledOnce; - }); - - it('should support UNSAFE_componentWillUpdate', () => { - let spy = sinon.spy(); - - class Foo extends React.Component { - // eslint-disable-next-line camelcase - UNSAFE_componentWillUpdate() { - spy(); - } - - render() { - return

foo

; - } - } - - React.render(, scratch); - // Trigger an update - React.render(, scratch); - expect(spy).to.be.calledOnce; - }); - - it('should support UNSAFE_componentWillUpdate #2', () => { - let spy = sinon.spy(); - - class Foo extends React.Component { - render() { - return

foo

; - } - } - - Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillUpdate', { - value: spy - }); - - React.render(, scratch); - // Trigger an update - React.render(, scratch); - expect(spy).to.be.calledOnce; - }); - - it('should alias UNSAFE_* method to non-prefixed variant', () => { - let inst; - class Foo extends React.Component { - // eslint-disable-next-line camelcase - UNSAFE_componentWillMount() {} - // eslint-disable-next-line camelcase - UNSAFE_componentWillReceiveProps() {} - // eslint-disable-next-line camelcase - UNSAFE_componentWillUpdate() {} - render() { - inst = this; - return
foo
; - } - } - - React.render(, scratch); - - expect(inst.UNSAFE_componentWillMount).to.equal(inst.componentWillMount); - expect(inst.UNSAFE_componentWillReceiveProps).to.equal( - inst.UNSAFE_componentWillReceiveProps - ); - expect(inst.UNSAFE_componentWillUpdate).to.equal( - inst.UNSAFE_componentWillUpdate - ); - }); - - it('should call UNSAFE_* methods through Suspense with wrapper component #2525', () => { - class Page extends React.Component { - UNSAFE_componentWillMount() {} - render() { - return

Example

; - } - } - - const Wrapper = () => ; - - sinon.spy(Page.prototype, 'UNSAFE_componentWillMount'); - - React.render( - fallback}> - - , - scratch - ); - - expect(scratch.innerHTML).to.equal('

Example

'); - expect(Page.prototype.UNSAFE_componentWillMount).to.have.been.called; - }); - }); });