Skip to content

react: allow the use of getSnapshotBeforeUpdate #24985

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jacobwgillespie wants to merge 3 commits into from
Closed

react: allow the use of getSnapshotBeforeUpdate #24985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4fa0c20
Add test illustrating broken getSnapshotBeforeUpdate
jacobwgillespie Apr 14, 2018
a4632e4
Fix issue with React getSnapshotBeforeUpdate
jacobwgillespie Apr 14, 2018
09392fa
Fix more instances of react snapshot
jacobwgillespie Apr 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions types/react-addons-shallow-compare/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export = shallowCompare;
// https://github.com/Microsoft/TypeScript/issues/5073
declare namespace shallowCompare {}

declare function shallowCompare<P, S>(
component: Component<P, S>,
declare function shallowCompare<P, S, SS>(
component: Component<P, S, SS>,
nextProps: P,
nextState: S): boolean;
30 changes: 15 additions & 15 deletions types/react-addons-test-utils/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.6

import { AbstractView, Component, ComponentClass,
import { AbstractView, Component, ComponentClass, ComponentState, ComponentSnapshot,
ReactElement, ReactInstance, ClassType,
DOMElement, SFCElement, CElement,
ReactHTMLElement, DOMAttributes, SFC } from 'react';
Expand Down Expand Up @@ -62,7 +62,7 @@ declare namespace TestUtils {
}

export interface EventSimulator {
(element: Element | Component<any>, eventData?: SyntheticEventData): void;
(element: Element | Component<any, ComponentState, ComponentSnapshot>, eventData?: SyntheticEventData): void;
}

export interface MockedComponentClass {
Expand Down Expand Up @@ -120,10 +120,10 @@ declare namespace TestUtils {
element: DOMElement<any, T>): T;
export function renderIntoDocument(
element: SFCElement<any>): void;
export function renderIntoDocument<T extends Component<any>>(
export function renderIntoDocument<T extends Component<any, ComponentState, ComponentSnapshot>>(
element: CElement<any, T>): T;
export function renderIntoDocument<P>(
element: ReactElement<P>): Component<P> | Element | void;
element: ReactElement<P>): Component<P, ComponentState, ComponentSnapshot> | Element | void;

export function mockComponent(
mocked: MockedComponentClass, mockTagName?: string): typeof TestUtils;
Expand All @@ -138,34 +138,34 @@ declare namespace TestUtils {
element: ReactElement<any>, type: ClassType<P, T, C>): element is CElement<P, T>;

export function isDOMComponent(instance: ReactInstance): instance is Element;
export function isCompositeComponent(instance: ReactInstance): instance is Component<any>;
export function isCompositeComponentWithType<T extends Component<any>, C extends ComponentClass<any>>(
export function isCompositeComponent(instance: ReactInstance): instance is Component<any, ComponentState, ComponentSnapshot>;
export function isCompositeComponentWithType<T extends Component<any, ComponentState, ComponentSnapshot>, C extends ComponentClass<any>>(
instance: ReactInstance, type: ClassType<any, T, C>): T;

export function findAllInRenderedTree(
root: Component<any>,
root: Component<any, ComponentState, ComponentSnapshot>,
fn: (i: ReactInstance) => boolean): ReactInstance[];

export function scryRenderedDOMComponentsWithClass(
root: Component<any>,
root: Component<any, ComponentState, ComponentSnapshot>,
className: string): Element[];
export function findRenderedDOMComponentWithClass(
root: Component<any>,
root: Component<any, ComponentState, ComponentSnapshot>,
className: string): Element;

export function scryRenderedDOMComponentsWithTag(
root: Component<any>,
root: Component<any, ComponentState, ComponentSnapshot>,
tagName: string): Element[];
export function findRenderedDOMComponentWithTag(
root: Component<any>,
root: Component<any, ComponentState, ComponentSnapshot>,
tagName: string): Element;

export function scryRenderedComponentsWithType<T extends Component<{}>, C extends ComponentClass<{}>>(
root: Component<any>,
export function scryRenderedComponentsWithType<T extends Component<{}, ComponentState, ComponentSnapshot>, C extends ComponentClass<{}>>(
root: Component<any, ComponentState, ComponentSnapshot>,
type: ClassType<any, T, C>): T[];

export function findRenderedComponentWithType<T extends Component<{}>, C extends ComponentClass<{}>>(
root: Component<any>,
export function findRenderedComponentWithType<T extends Component<{}, ComponentState, ComponentSnapshot>, C extends ComponentClass<{}>>(
root: Component<any, ComponentState, ComponentSnapshot>,
type: ClassType<any, T, C>): T;

export function createRenderer(): ShallowRenderer;
Expand Down
10 changes: 5 additions & 5 deletions types/react-dom/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
export as namespace ReactDOM;

import {
ReactInstance, Component, ComponentState,
ReactInstance, Component, ComponentState, ComponentSnapshot,
ReactElement, SFCElement, CElement,
DOMAttributes, DOMElement, ReactNode, ReactPortal
} from 'react';
Expand All @@ -34,7 +34,7 @@ export function unstable_renderSubtreeIntoContainer<T extends Element>(
element: DOMElement<DOMAttributes<T>, T>,
container: Element,
callback?: (element: T) => any): T;
export function unstable_renderSubtreeIntoContainer<P, T extends Component<P, ComponentState>>(
export function unstable_renderSubtreeIntoContainer<P, T extends Component<P, ComponentState, ComponentSnapshot>>(
parentComponent: Component<any>,
element: CElement<P, T>,
container: Element,
Expand All @@ -43,7 +43,7 @@ export function unstable_renderSubtreeIntoContainer<P>(
parentComponent: Component<any>,
element: ReactElement<P>,
container: Element,
callback?: (component?: Component<P, ComponentState> | Element) => any): Component<P, ComponentState> | Element | void;
callback?: (component?: Component<P, ComponentState, ComponentSnapshot> | Element) => any): Component<P, ComponentState, ComponentSnapshot> | Element | void;

export interface Renderer {
// Deprecated(render): The return value is deprecated.
Expand All @@ -67,7 +67,7 @@ export interface Renderer {
callback?: () => void
): void;

<P, T extends Component<P, ComponentState>>(
<P, T extends Component<P, ComponentState, ComponentSnapshot>>(
element: CElement<P, T>,
container: Element | null,
callback?: () => void
Expand All @@ -83,7 +83,7 @@ export interface Renderer {
element: ReactElement<P>,
container: Element | null,
callback?: () => void
): Component<P, ComponentState> | Element | void;
): Component<P, ComponentState, ComponentSnapshot> | Element | void;

(
element: Array<ReactElement<any>>,
Expand Down
26 changes: 14 additions & 12 deletions types/react/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ declare namespace React {
// tslint:disable-next-line:interface-over-type-literal
type ComponentState = {};

type ComponentSnapshot = any;

interface Attributes {
key?: Key;
}
Expand All @@ -75,8 +77,8 @@ declare namespace React {
type: SFC<P>;
}

type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;
interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P> {
type CElement<P, T extends Component<P, ComponentState, ComponentSnapshot>> = ComponentElement<P, T>;
interface ComponentElement<P, T extends Component<P, ComponentState, ComponentSnapshot>> extends ReactElement<P> {
type: ComponentClass<P>;
ref?: Ref<T>;
}
Expand Down Expand Up @@ -115,10 +117,10 @@ declare namespace React {

type SFCFactory<P> = (props?: Attributes & P, ...children: ReactNode[]) => SFCElement<P>;

type ComponentFactory<P, T extends Component<P, ComponentState>> =
type ComponentFactory<P, T extends Component<P, ComponentState, ComponentSnapshot>> =
(props?: ClassAttributes<T> & P, ...children: ReactNode[]) => CElement<P, T>;

type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory<P, T>;
type CFactory<P, T extends Component<P, ComponentState, ComponentSnapshot>> = ComponentFactory<P, T>;
type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>;

type DOMFactory<P extends DOMAttributes<T>, T extends Element> =
Expand Down Expand Up @@ -163,7 +165,7 @@ declare namespace React {
function createFactory<P>(type: SFC<P>): SFCFactory<P>;
function createFactory<P>(
type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>): CFactory<P, ClassicComponent<P, ComponentState>>;
function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
function createFactory<P, T extends Component<P, ComponentState, ComponentSnapshot>, C extends ComponentClass<P>>(
type: ClassType<P, T, C>): CFactory<P, T>;
function createFactory<P>(type: ComponentClass<P>): Factory<P>;

Expand Down Expand Up @@ -195,7 +197,7 @@ declare namespace React {
type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
props?: ClassAttributes<ClassicComponent<P, ComponentState>> & P | null,
...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>;
function createElement<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
function createElement<P, T extends Component<P, ComponentState, ComponentSnapshot>, C extends ComponentClass<P>>(
type: ClassType<P, T, C>,
props?: ClassAttributes<T> & P | null,
...children: ReactNode[]): CElement<P, T>;
Expand Down Expand Up @@ -231,7 +233,7 @@ declare namespace React {
element: SFCElement<P>,
props?: Partial<P> & Attributes,
...children: ReactNode[]): SFCElement<P>;
function cloneElement<P, T extends Component<P, ComponentState>>(
function cloneElement<P, T extends Component<P, ComponentState, ComponentSnapshot>>(
element: CElement<P, T>,
props?: Partial<P> & ClassAttributes<T>,
...children: ReactNode[]): CElement<P, T>;
Expand All @@ -251,7 +253,7 @@ declare namespace React {
// Component API
// ----------------------------------------------------------------------

type ReactInstance = Component<any> | Element;
type ReactInstance = Component<any, ComponentState, ComponentSnapshot> | Element;

// Base component for plain JS classes
// tslint:disable-next-line:no-empty-interface
Expand Down Expand Up @@ -283,7 +285,7 @@ declare namespace React {
};
}

class PureComponent<P = {}, S = {}> extends Component<P, S> { }
class PureComponent<P = {}, S = {}, SS = never> extends Component<P, S, SS> { }

interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {
replaceState(nextState: S, callback?: () => void): void;
Expand Down Expand Up @@ -317,7 +319,7 @@ declare namespace React {
}

interface ComponentClass<P = {}> extends StaticLifecycle<P, any> {
new (props: P, context?: any): Component<P, ComponentState>;
new (props: P, context?: any): Component<P, ComponentState, ComponentSnapshot>;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>;
Expand All @@ -335,7 +337,7 @@ declare namespace React {
* a single argument, which is useful for many top-level API defs.
* See https://github.com/Microsoft/TypeScript/issues/7234 for more info.
*/
type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
type ClassType<P, T extends Component<P, ComponentState, ComponentSnapshot>, C extends ComponentClass<P>> =
C &
(new (props: P, context?: any) => T) &
(new (props: P, context?: any) => { props: P });
Expand Down Expand Up @@ -2211,7 +2213,7 @@ declare global {
namespace JSX {
// tslint:disable-next-line:no-empty-interface
interface Element extends React.ReactElement<any> { }
interface ElementClass extends React.Component<any> {
interface ElementClass extends React.Component<any, {}, any> {
render(): React.ReactNode;
}
interface ElementAttributesProperty { props: {}; }
Expand Down
16 changes: 14 additions & 2 deletions types/react/test/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ interface State {
seconds?: number;
}

interface Snapshot {
foo: string;
}

interface Context {
someValue?: string;
}
Expand All @@ -33,7 +37,7 @@ interface ChildContext {
someOtherValue: string;
}

interface MyComponent extends React.Component<Props, State> {
interface MyComponent extends React.Component<Props, State, Snapshot> {
reset(): void;
}

Expand All @@ -51,7 +55,7 @@ declare const container: Element;
// Top-Level API
// --------------------------------------------------------------------------

class ModernComponent extends React.Component<Props, State>
class ModernComponent extends React.Component<Props, State, Snapshot>
implements MyComponent, React.ChildContextProvider<ChildContext> {
static propTypes: React.ValidationMap<Props> = {
foo: PropTypes.number
Expand Down Expand Up @@ -103,6 +107,14 @@ class ModernComponent extends React.Component<Props, State>
shouldComponentUpdate(nextProps: Props, nextState: State, nextContext: any): boolean {
return shallowCompare(this, nextProps, nextState);
}

getSnapshotBeforeUpdate(prevProps: Readonly<Props>) {
return { foo: `${prevProps.foo}baz` };
}

componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot: { foo: string }) {
return;
}
}

class ModernComponentArrayRender extends React.Component<Props> {
Expand Down
20 changes: 20 additions & 0 deletions types/react/test/tsx.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,26 @@ class ComponentWithNewLifecycles extends React.Component<NewProps, NewState, { b
return this.state.bar;
}
}
<ComponentWithNewLifecycles foo="bar" />;
Copy link
Copy Markdown
Member

@Jessidhia Jessidhia Apr 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it also work with React.createElement?


class PureComponentWithNewLifecycles extends React.PureComponent<NewProps, NewState, { baz: string }> {
static getDerivedStateFromProps: React.GetDerivedStateFromProps<NewProps, NewState> = (nextProps) => {
return { bar: `${nextProps.foo}bar` };
}

getSnapshotBeforeUpdate(prevProps: Readonly<NewProps>) {
return { baz: `${prevProps.foo}baz` };
}

componentDidUpdate(prevProps: Readonly<NewProps>, prevState: Readonly<NewState>, snapshot: { baz: string }) {
return;
}

render() {
return this.state.bar;
}
}
<PureComponentWithNewLifecycles foo="bar" />;

class ComponentWithLargeState extends React.Component<{}, Record<'a'|'b'|'c', string>> {
static getDerivedStateFromProps: React.GetDerivedStateFromProps<{}, Record<'a'|'b'|'c', string>> = () => {
Expand Down