diff --git a/packages/react-params/src/ParamComp.tsx b/packages/react-params/src/ParamComp.tsx
new file mode 100644
index 0000000000..297c16ec32
--- /dev/null
+++ b/packages/react-params/src/ParamComp.tsx
@@ -0,0 +1,42 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { TypeDef } from '@polkadot/types/types';
+import { ComponentMap, RawParam, RawParams, RawParamOnChangeValue } from './types';
+
+import React from 'react';
+
+import Param from './Param';
+
+interface Props {
+  defaultValue: RawParam;
+  index: number;
+  isDisabled?: boolean;
+  name?: string;
+  onChange: (index: number, value: RawParamOnChangeValue) => void;
+  onEnter?: () => void;
+  overrides?: ComponentMap;
+  type: TypeDef;
+  values?: RawParams | null;
+}
+
+export default function ParamComp ({ defaultValue, index, isDisabled, name, onChange, onEnter, overrides, type }: Props): React.ReactElement<Props> {
+  const _onChange = (value: RawParamOnChangeValue): void =>
+    onChange(index, value);
+
+  return (
+    <div className='ui--Param-composite'>
+      <Param
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        key={`input:${index}`}
+        name={name}
+        onChange={_onChange}
+        onEnter={onEnter}
+        overrides={overrides}
+        type={type}
+      />
+    </div>
+  );
+}
diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx
index e2f9045ddd..d2684c5eea 100644
--- a/packages/react-params/src/index.tsx
+++ b/packages/react-params/src/index.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentMap, ParamDef, RawParam, RawParams, RawParamOnChange, RawParamOnChangeValue } from './types';
+import { ComponentMap, ParamDef, RawParam, RawParams, RawParamOnChangeValue } from './types';
 
 import './Params.css';
 
@@ -11,7 +11,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { classes } from '@polkadot/react-components/util';
 
-import Param from './Param';
+import ParamComp from './ParamComp';
 import translate from './translate';
 import { createValue } from './values';
 
@@ -25,22 +25,14 @@ interface Props extends I18nProps {
 }
 
 interface State {
-  handlersChange?: RawParamOnChange[];
-  onChangeParam: (at: number, next: RawParamOnChangeValue) => void;
-  params?: ParamDef[];
+  params?: ParamDef[] | null;
   values?: RawParams;
 }
 
 class Params extends React.PureComponent<Props, State> {
-  public state: State;
-
-  public constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      onChangeParam: this.onChangeParam
-    };
-  }
+  public state: State = {
+    params: null
+  };
 
   public static getDerivedStateFromProps ({ isDisabled, params, values }: Props, prevState: State): Pick<State, never> | null {
     const isSame = JSON.stringify(prevState.params) === JSON.stringify(params);
@@ -49,50 +41,41 @@ class Params extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const newValues = params.reduce(
-      (result: RawParams, param, index): RawParams => [
-        ...result,
-        values && values[index]
-          ? values[index]
-          : createValue(param)
-      ],
-      []
-    );
-
-    const handlersChange = newValues.map(
-      (_, index): RawParamOnChange =>
-        (value: RawParamOnChangeValue): void =>
-          prevState.onChangeParam(index, value)
-    );
-
     return {
-      handlersChange,
       params,
-      values: newValues
+      values: params.reduce(
+        (result: RawParams, param, index): RawParams => [
+          ...result,
+          values && values[index]
+            ? values[index]
+            : createValue(param)
+        ],
+        []
+      )
     };
   }
 
-  // Fire the intial onChange (we did update) when the component is loaded
+  // Fire the initial onChange (we did update) when the component is loaded
   public componentDidMount (): void {
-    this.componentDidUpdate({} as unknown as Props, {} as unknown as State);
+    this.componentDidUpdate(null, {});
   }
 
   // This is needed in the case where the item changes, i.e. the values get
-  // initialised and we need to alert the parent that we have new values
-  public componentDidUpdate (_: Props, prevState: State): void {
+  // initialized and we need to alert the parent that we have new values
+  public componentDidUpdate (_: Props | null, prevState: State): void {
     const { isDisabled } = this.props;
     const { values } = this.state;
 
-    if (!isDisabled && prevState.values !== values) {
+    if (!isDisabled && JSON.stringify(prevState.values) !== JSON.stringify(values)) {
       this.triggerUpdate();
     }
   }
 
   public render (): React.ReactNode {
-    const { className, isDisabled, onEnter, overrides, params, style } = this.props;
-    const { handlersChange = [], values = this.props.values } = this.state;
+    const { className, isDisabled, overrides, params, style } = this.props;
+    const { values = this.props.values } = this.state;
 
-    if (!params || params.length === 0) {
+    if (!values || !values.length) {
       return null;
     }
 
@@ -102,48 +85,24 @@ class Params extends React.PureComponent<Props, State> {
         style={style}
       >
         <div className='ui--Params-Content'>
-          {params.map(({ name, type }: ParamDef, index: number): React.ReactNode => {
-            if (!values || values.length === 0) {
-              return null;
-            }
-
-            const key = `${name}:${type}:${index}`;
-
-            return (
-              <div
-                className='ui--Param-composite'
-                key={key}
-              >
-                <Param
-                  defaultValue={values[index]}
-                  isDisabled={isDisabled}
-                  key={`input:${key}`}
-                  name={name}
-                  onChange={handlersChange[index]}
-                  onEnter={onEnter}
-                  overrides={overrides}
-                  type={type}
-                />
-              </div>
-            );
-          })}
+          {values && params.map(({ name, type }: ParamDef, index: number): React.ReactNode => (
+            <ParamComp
+              defaultValue={values[index]}
+              index={index}
+              isDisabled={isDisabled}
+              key={`${name}:${type}:${index}`}
+              name={name}
+              onChange={this.onChangeParam}
+              overrides={overrides}
+              type={type}
+            />
+          ))}
         </div>
       </div>
     );
   }
 
-  private extractValues (): RawParam[] {
-    const { values } = this.state;
-    const { isDisabled } = this.props;
-
-    if (isDisabled || !values) {
-      return [];
-    }
-
-    return values;
-  }
-
-  private onChangeParam = (at: number, newValue: RawParamOnChangeValue): void => {
+  private onChangeParam = (index: number, newValue: RawParamOnChangeValue): void => {
     const { isDisabled } = this.props;
 
     if (isDisabled) {
@@ -154,8 +113,8 @@ class Params extends React.PureComponent<Props, State> {
 
     this.setState(
       (prevState: State): Pick<State, never> => ({
-        values: (prevState.values || []).map((prev, index): RawParam =>
-          index !== at
+        values: (prevState.values || []).map((prev, prevIndex): RawParam =>
+          prevIndex !== index
             ? prev
             : { isValid, value }
         )
@@ -165,14 +124,14 @@ class Params extends React.PureComponent<Props, State> {
   }
 
   private triggerUpdate = (): void => {
-    const { values } = this.state;
     const { onChange, isDisabled } = this.props;
+    const { values } = this.state;
 
     if (isDisabled || !values) {
       return;
     }
 
-    onChange && onChange(this.extractValues());
+    onChange && onChange(values);
   }
 }