Skip to content

Commit 64ddbab

Browse files
JoviDeCroockJoviDeCroock
committed
Look at impact of removing deprecated lifecycles (#4656)
1 parent f410bc1 commit 64ddbab

File tree

2 files changed

+0
-277
lines changed

2 files changed

+0
-277
lines changed

‎compat/src/render.js‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,33 +40,6 @@ const onChangeInputType = type => /fil|che|rad/.test(type);
4040
// Some libraries like `react-virtualized` explicitly check for this.
4141
Component.prototype.isReactComponent = {};
4242

43-
// `UNSAFE_*` lifecycle hooks
44-
// Preact only ever invokes the unprefixed methods.
45-
// Here we provide a base "fallback" implementation that calls any defined UNSAFE_ prefixed method.
46-
// - If a component defines its own `componentDidMount()` (including via defineProperty), use that.
47-
// - If a component defines `UNSAFE_componentDidMount()`, `componentDidMount` is the alias getter/setter.
48-
// - If anything assigns to an `UNSAFE_*` property, the assignment is forwarded to the unprefixed property.
49-
// See https://github.com/preactjs/preact/issues/1941
50-
[
51-
'componentWillMount',
52-
'componentWillReceiveProps',
53-
'componentWillUpdate'
54-
].forEach(key => {
55-
Object.defineProperty(Component.prototype, key, {
56-
configurable: true,
57-
get() {
58-
return this['UNSAFE_' + key];
59-
},
60-
set(v) {
61-
Object.defineProperty(this, key, {
62-
configurable: true,
63-
writable: true,
64-
value: v
65-
});
66-
}
67-
});
68-
});
69-
7043
/**
7144
* Proxy render() since React returns a Component reference.
7245
* @param {import('./internal').VNode} vnode VNode tree to render

‎compat/test/browser/component.test.js‎

Lines changed: 0 additions & 250 deletions
Original file line numberDiff line numberDiff line change
@@ -75,254 +75,4 @@ describe('components', () => {
7575
children: 'second'
7676
});
7777
});
78-
79-
describe('UNSAFE_* lifecycle methods', () => {
80-
it('should support UNSAFE_componentWillMount', () => {
81-
let spy = sinon.spy();
82-
83-
class Foo extends React.Component {
84-
// eslint-disable-next-line camelcase
85-
UNSAFE_componentWillMount() {
86-
spy();
87-
}
88-
89-
render() {
90-
return <h1>foo</h1>;
91-
}
92-
}
93-
94-
React.render(<Foo />, scratch);
95-
96-
expect(spy).to.be.calledOnce;
97-
});
98-
99-
it('should support UNSAFE_componentWillMount #2', () => {
100-
let spy = sinon.spy();
101-
102-
class Foo extends React.Component {
103-
render() {
104-
return <h1>foo</h1>;
105-
}
106-
}
107-
108-
Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillMount', {
109-
value: spy
110-
});
111-
112-
React.render(<Foo />, scratch);
113-
expect(spy).to.be.calledOnce;
114-
});
115-
116-
it('should support UNSAFE_componentWillReceiveProps', () => {
117-
let spy = sinon.spy();
118-
119-
class Foo extends React.Component {
120-
// eslint-disable-next-line camelcase
121-
UNSAFE_componentWillReceiveProps() {
122-
spy();
123-
}
124-
125-
render() {
126-
return <h1>foo</h1>;
127-
}
128-
}
129-
130-
React.render(<Foo />, scratch);
131-
// Trigger an update
132-
React.render(<Foo />, scratch);
133-
expect(spy).to.be.calledOnce;
134-
});
135-
136-
it('should support UNSAFE_componentWillReceiveProps #2', () => {
137-
let spy = sinon.spy();
138-
139-
class Foo extends React.Component {
140-
render() {
141-
return <h1>foo</h1>;
142-
}
143-
}
144-
145-
Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillReceiveProps', {
146-
value: spy
147-
});
148-
149-
React.render(<Foo />, scratch);
150-
// Trigger an update
151-
React.render(<Foo />, scratch);
152-
expect(spy).to.be.calledOnce;
153-
});
154-
155-
it('should support UNSAFE_componentWillUpdate', () => {
156-
let spy = sinon.spy();
157-
158-
class Foo extends React.Component {
159-
// eslint-disable-next-line camelcase
160-
UNSAFE_componentWillUpdate() {
161-
spy();
162-
}
163-
164-
render() {
165-
return <h1>foo</h1>;
166-
}
167-
}
168-
169-
React.render(<Foo />, scratch);
170-
// Trigger an update
171-
React.render(<Foo />, scratch);
172-
expect(spy).to.be.calledOnce;
173-
});
174-
175-
it('should support UNSAFE_componentWillUpdate #2', () => {
176-
let spy = sinon.spy();
177-
178-
class Foo extends React.Component {
179-
render() {
180-
return <h1>foo</h1>;
181-
}
182-
}
183-
184-
Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillUpdate', {
185-
value: spy
186-
});
187-
188-
React.render(<Foo />, scratch);
189-
// Trigger an update
190-
React.render(<Foo />, scratch);
191-
expect(spy).to.be.calledOnce;
192-
});
193-
194-
it('should alias UNSAFE_* method to non-prefixed variant', () => {
195-
let inst;
196-
class Foo extends React.Component {
197-
// eslint-disable-next-line camelcase
198-
UNSAFE_componentWillMount() {}
199-
// eslint-disable-next-line camelcase
200-
UNSAFE_componentWillReceiveProps() {}
201-
// eslint-disable-next-line camelcase
202-
UNSAFE_componentWillUpdate() {}
203-
render() {
204-
inst = this;
205-
return <div>foo</div>;
206-
}
207-
}
208-
209-
React.render(<Foo />, scratch);
210-
211-
expect(inst.UNSAFE_componentWillMount).to.equal(inst.componentWillMount);
212-
expect(inst.UNSAFE_componentWillReceiveProps).to.equal(
213-
inst.UNSAFE_componentWillReceiveProps
214-
);
215-
expect(inst.UNSAFE_componentWillUpdate).to.equal(
216-
inst.UNSAFE_componentWillUpdate
217-
);
218-
});
219-
220-
it('should call UNSAFE_* methods through Suspense with wrapper component #2525', () => {
221-
class Page extends React.Component {
222-
UNSAFE_componentWillMount() {}
223-
render() {
224-
return <h1>Example</h1>;
225-
}
226-
}
227-
228-
const Wrapper = () => <Page />;
229-
230-
sinon.spy(Page.prototype, 'UNSAFE_componentWillMount');
231-
232-
React.render(
233-
<React.Suspense fallback={<div>fallback</div>}>
234-
<Wrapper />
235-
</React.Suspense>,
236-
scratch
237-
);
238-
239-
expect(scratch.innerHTML).to.equal('<h1>Example</h1>');
240-
expect(Page.prototype.UNSAFE_componentWillMount).to.have.been.called;
241-
});
242-
});
243-
244-
describe('defaultProps', () => {
245-
it('should apply default props on initial render', () => {
246-
class WithDefaultProps extends Component {
247-
constructor(props, context) {
248-
super(props, context);
249-
expect(props).to.be.deep.equal({
250-
fieldA: 1,
251-
fieldB: 2,
252-
fieldC: 1,
253-
fieldD: 2
254-
});
255-
}
256-
render() {
257-
return <div />;
258-
}
259-
}
260-
WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 };
261-
React.render(
262-
<WithDefaultProps fieldA={1} fieldB={2} fieldD={2} />,
263-
scratch
264-
);
265-
});
266-
267-
it('should apply default props on rerender', () => {
268-
let doRender;
269-
class Outer extends Component {
270-
constructor() {
271-
super();
272-
this.state = { i: 1 };
273-
}
274-
componentDidMount() {
275-
doRender = () => this.setState({ i: 2 });
276-
}
277-
render(props, { i }) {
278-
return <WithDefaultProps fieldA={1} fieldB={i} fieldD={i} />;
279-
}
280-
}
281-
class WithDefaultProps extends Component {
282-
constructor(props, context) {
283-
super(props, context);
284-
this.ctor(props, context);
285-
}
286-
ctor() {}
287-
componentWillReceiveProps() {}
288-
render() {
289-
return <div />;
290-
}
291-
}
292-
WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 };
293-
294-
let proto = WithDefaultProps.prototype;
295-
sinon.spy(proto, 'ctor');
296-
sinon.spy(proto, 'componentWillReceiveProps');
297-
sinon.spy(proto, 'render');
298-
299-
React.render(<Outer />, scratch);
300-
doRender();
301-
302-
const PROPS1 = {
303-
fieldA: 1,
304-
fieldB: 1,
305-
fieldC: 1,
306-
fieldD: 1
307-
};
308-
309-
const PROPS2 = {
310-
fieldA: 1,
311-
fieldB: 2,
312-
fieldC: 1,
313-
fieldD: 2
314-
};
315-
316-
expect(proto.ctor).to.have.been.calledWithMatch(PROPS1);
317-
expect(proto.render).to.have.been.calledWithMatch(PROPS1);
318-
319-
rerender();
320-
321-
// expect(proto.ctor).to.have.been.calledWith(PROPS2);
322-
expect(proto.componentWillReceiveProps).to.have.been.calledWithMatch(
323-
PROPS2
324-
);
325-
expect(proto.render).to.have.been.calledWithMatch(PROPS2);
326-
});
327-
});
32878
});

0 commit comments

Comments
 (0)