Removing need for getDerivedStateFromProps

src/components/App/__snapshots__/test.js.snap

@@ -4,6 +4,7 @@ exports[`App rendering 1`] = `
 <React.Fragment>
   <Translate(Form)
     downloadUrls={Array []}
+    key="expr=undefined&syntax=undefined"
     onSubmit={[Function]}
     syntaxes={
       Object {

src/components/App/index.js

@@ -18,6 +18,8 @@ const syntaxes = {
   pcre: 'PCRE'
 };
 
+const toUrl = params => new URLSearchParams(params).toString();
+
 class App extends React.PureComponent {
   state = {}
 
@@ -110,8 +112,7 @@ class App extends React.PureComponent {
 
   handleSubmit = ({expr, syntax}) => {
     if (expr) {
-      const params = new URLSearchParams({ syntax, expr });
-      document.location.hash = params.toString();
+      document.location.hash = toUrl({ syntax, expr });
     }
   }
 
@@ -192,6 +193,7 @@ class App extends React.PureComponent {
 
     return <React.Fragment>
       <Form
+        key={ toUrl({ expr, syntax }) }
         syntaxes={ syntaxes }
         downloadUrls={ downloadUrls }
         permalinkUrl={ permalinkUrl }

src/components/Form/index.js

@@ -10,23 +10,8 @@ import style from './style.css';
 
 class Form extends React.PureComponent {
   state = {
-    syntax: Object.keys(this.props.syntaxes)[0],
-    prevProps: {}
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    let changes = { prevProps: props };
-    const { prevProps } = state;
-
-    if (props.expr && props.expr !== prevProps.expr) {
-      changes.expr = props.expr;
-    }
-
-    if (props.syntax && props.syntax !== prevProps.syntax) {
-      changes.syntax = props.syntax;
-    }
-
-    return changes;
+    expr: this.props.expr,
+    syntax: this.props.syntax || Object.keys(this.props.syntaxes)[0]
   }
 
   handleSubmit = event => {

src/components/Form/test.js

@@ -36,49 +36,6 @@ describe('Form', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('changing expression input', () => {
-    const component = shallow(
-      <Form t={ translate } syntaxes={ syntaxes }/>
-    );
-    const eventObj = {
-      target: { name: 'expr', value: 'Testing value' }
-    };
-    component.find('[name="expr"]').simulate('change', eventObj);
-
-    expect(component.state('expr')).toEqual('Testing value');
-  });
-
-  test('changing syntax input', () => {
-    const component = shallow(
-      <Form t={ translate } syntaxes={ syntaxes }/>
-    );
-    const eventObj = {
-      target: { name: 'syntax', value: 'Testing value' }
-    };
-    component.find('[name="syntax"]').simulate('change', eventObj);
-
-    expect(component.state('syntax')).toEqual('Testing value');
-  });
-
-  test('setting expression and syntax via props', () => {
-    const component = shallow(
-      <Form t={ translate } syntaxes={ syntaxes }/>
-    );
-    expect(component.state()).toEqual(expect.objectContaining({
-      syntax: 'js'
-    }));
-    component.setProps({ expr: 'Testing expression' });
-    expect(component.state()).toEqual(expect.objectContaining({
-      expr: 'Testing expression',
-      syntax: 'js'
-    }));
-    component.setProps({ syntax: 'testing syntax' });
-    expect(component.state()).toEqual(expect.objectContaining({
-      expr: 'Testing expression',
-      syntax: 'testing syntax'
-    }));
-  });
-
   describe('submitting expression', () => {
     test('submitting form', () => {
       const onSubmit = jest.fn();