Fix stale closures of event handlers (#76)

* Fix stale closures of callback options in inputs.text et. al.

The implementation of useFormState is problematic because it
caches callback functions passed to inputs.text et. al. This
causes functions like onChange, validate, and onBlur to run with
stale closures, namely, the closure with which they are
initialised.

This commit fixes the issue by removing the `callback` cache from
the implementation. Tests that depended on this buggy behavior
were removed as they are unsupportable features given the current
implementation.

* Re-add getOrSet to useCache

Author: derrickbeining

src/constants.js

@@ -46,7 +46,4 @@ export const TYPES = [
   WEEK,
 ];
 
-export const ON_CHANGE_HANDLER = 0;
-export const ON_BLUR_HANDLER = 1;
-
 export const CONSOLE_TAG = '[useFormState]';

src/useFormState.js

@@ -12,8 +12,6 @@ import {
   TEXTAREA,
   SELECT_MULTIPLE,
   LABEL,
-  ON_CHANGE_HANDLER,
-  ON_BLUR_HANDLER,
   CONSOLE_TAG,
 } from './constants';
 
@@ -31,7 +29,6 @@ export default function useFormState(initialState, options) {
   const formState = useState({ initialState, ...formOptions });
   const { getIdProp } = useInputId(formOptions.withIds);
   const { set: setDirty, has: isDirty } = useCache();
-  const callbacks = useCache();
   const devWarnings = useCache();
 
   function warn(key, type, message) {
@@ -202,7 +199,7 @@ export default function useFormState(initialState, options) {
 
         return hasValueInState ? formState.current.values[name] : '';
       },
-      onChange: callbacks.getOrSet(ON_BLUR_HANDLER + key, e => {
+      onChange: e => {
         setDirty(name, true);
         let value;
         if (isRaw) {
@@ -252,8 +249,8 @@ export default function useFormState(initialState, options) {
         }
 
         formState.setValues(partialNewState);
-      }),
-      onBlur: callbacks.getOrSet(ON_CHANGE_HANDLER + key, e => {
+      },
+      onBlur: e => {
         touch(e);
 
         inputOptions.onBlur(e);
@@ -269,7 +266,7 @@ export default function useFormState(initialState, options) {
           validate(e);
           setDirty(name, false);
         }
-      }),
+      },
       ...getIdProp('id', name, ownValue),
     };
 

test/useFormState-input.test.js

@@ -534,23 +534,3 @@ describe('Input blur behavior', () => {
     );
   });
 });
-
-describe('Input props are memoized', () => {
-  it('does not cause re-render of memoized components', () => {
-    const renderCheck = jest.fn(() => true);
-    const MemoInput = React.memo(
-      props => renderCheck() && <input {...props} />,
-    );
-    const { change, root } = renderWithFormState(([, { text }]) => (
-      <div>
-        <input {...text('foo')} />
-        <MemoInput {...text('bar')} />
-      </div>
-    ));
-    change({ value: 'a' }, root.childNodes[0]);
-    change({ value: 'b' }, root.childNodes[0]);
-    expect(renderCheck).toHaveBeenCalledTimes(1);
-    change({ value: 'c' }, root.childNodes[1]);
-    expect(renderCheck).toHaveBeenCalledTimes(2);
-  });
-});