fix: rm componentWillReceiveProps from relative

Author: longlho

src/components/relative.tsx

@@ -68,6 +68,8 @@ export interface Props extends FormatRelativeTimeOptions {
 }
 
 interface State {
+  prevUnit?: Unit;
+  prevValue?: number;
   currentValueInSeconds: number;
 }
 
@@ -91,6 +93,8 @@ class FormattedRelativeTime extends React.PureComponent<Props, State> {
     unit: 'second',
   };
   state: State = {
+    prevUnit: this.props.unit,
+    prevValue: this.props.value,
     currentValueInSeconds: canIncrement(this.props.unit)
       ? valueToSeconds(this.props.value, this.props.unit)
       : 0,
@@ -152,17 +156,17 @@ class FormattedRelativeTime extends React.PureComponent<Props, State> {
     this._updateTimer = null;
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (
-      this.props.value !== nextProps.value ||
-      this.props.unit !== nextProps.unit
-    ) {
-      this.setState({
-        currentValueInSeconds: canIncrement(nextProps.unit)
-          ? valueToSeconds(nextProps.value, nextProps.unit)
+  static getDerivedStateFromProps(props: Props, state: State) {
+    if (props.unit !== state.prevUnit || props.value !== state.prevValue) {
+      return {
+        prevValue: props.value,
+        prevUnit: props.unit,
+        currentValueInSeconds: canIncrement(props.unit)
+          ? valueToSeconds(props.value, props.unit)
           : 0,
-      });
+      };
     }
+    return null;
   }
 
   render() {

test/unit/components/html-message.tsx

@@ -103,7 +103,7 @@ describe('<FormattedHTMLMessage>', () => {
     const spy = jest.fn().mockImplementation(() => <p>Jest</p>);
     const rendered = mountWithProvider({...descriptor, children: spy}, intl);
 
-    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledTimes(2);
     expect(spy.mock.calls[0]).toEqual([intl.formatHTMLMessage(descriptor)]);
 
     expect(rendered.text()).toBe('Jest');

test/unit/components/message.tsx

@@ -105,7 +105,7 @@ describe('<FormattedMessage>', () => {
 
     const rendered = mountWithProvider({...descriptor, children: spy}, intl);
 
-    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledTimes(2);
     expect(spy.mock.calls[0]).toEqual([intl.formatMessage(descriptor)]);
 
     expect(rendered.text()).toBe('Jest');
@@ -207,14 +207,14 @@ describe('<FormattedMessage>', () => {
         ...values, // create new object instance with same values to test shallow equality check
       },
     });
-    expect(spy).toHaveBeenCalledTimes(1); // expect only 1 render as the value object instance changed but not its values
+    expect(spy).toHaveBeenCalledTimes(2); // expect only 1 render as the value object instance changed but not its values
 
     injectIntlContext.setProps({
       ...descriptor,
       values: {
         name: 'Enzyme',
       },
     });
-    expect(spy).toHaveBeenCalledTimes(2); // expect a rerender after having changed the name
+    expect(spy).toHaveBeenCalledTimes(4); // expect a rerender after having changed the name
   });
 });

test/unit/components/relative.tsx

@@ -45,7 +45,7 @@ describe('<FormattedRelative>', () => {
     const spy = jest.fn().mockImplementation(() => null);
     mountWithProvider({value: 0, children: spy}, intl);
     mountWithProvider({value: 1, children: spy}, intl);
-    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenCalledTimes(4);
   });
 
   it('should re-render when context changes', () => {
@@ -56,7 +56,7 @@ describe('<FormattedRelative>', () => {
     mountWithProvider({value: 0, children: spy}, intl);
     mountWithProvider({value: 0, children: spy}, otherIntl);
 
-    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenCalledTimes(4);
   });
 
   it('accepts valid IntlRelativeTimeFormat options as props', () => {
@@ -110,7 +110,7 @@ describe('<FormattedRelative>', () => {
     const spy = jest.fn().mockImplementation(() => <b>Jest</b>);
     const rendered = mountWithProvider({value: 0, children: spy}, intl);
 
-    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledTimes(2);
     expect(spy.mock.calls[0]).toEqual([intl.formatRelativeTime(0)]);
 
     expect(

test/unit/testUtils.tsx

@@ -3,6 +3,14 @@ import {mount} from 'enzyme';
 import {WithIntlProps} from '../../src/components/injectIntl';
 import Provider, {Props as ProviderProps} from '../../src/components/provider';
 
+function StrictProvider(props: ProviderProps) {
+  return (
+    <React.StrictMode>
+      <Provider {...props} />
+    </React.StrictMode>
+  );
+}
+
 export function mountFormattedComponentWithProvider<P>(
   Comp: React.ComponentType<P>
 ) {
@@ -13,7 +21,7 @@ export function mountFormattedComponentWithProvider<P>(
     return mount(
       <Comp {...props} />,
       {
-        wrappingComponent: Provider,
+        wrappingComponent: StrictProvider,
         wrappingComponentProps: providerProps,
       } as any // Seems like DefinitelyTyped types are outdated
     );