Persist reference to formstate (#116)

* Use persistent reference to formstate

* clean up code

* Add test

Author: wsmd

src/constants.js

@@ -24,7 +24,7 @@ export const LABEL = 'label';
  */
 export const DATETIME_LOCAL = 'datetime-local';
 
-export const TYPES = [
+export const INPUT_TYPES = [
   CHECKBOX,
   COLOR,
   DATE,

src/useFormState.js

@@ -1,10 +1,11 @@
+import { useRef } from 'react';
 import { toString, noop, omit, isFunction, isEmpty } from './utils';
 import { parseInputArgs } from './parseInputArgs';
 import { useInputId } from './useInputId';
 import { useCache } from './useCache';
 import { useState } from './useState';
 import {
-  TYPES,
+  INPUT_TYPES,
   SELECT,
   CHECKBOX,
   RADIO,
@@ -29,7 +30,7 @@ const defaultFormOptions = {
 export default function useFormState(initialState, options) {
   const formOptions = { ...defaultFormOptions, ...options };
 
-  const formState = useState({ initialState, ...formOptions });
+  const formState = useState({ initialState });
   const { getIdProp } = useInputId(formOptions.withIds);
   const { set: setDirty, has: isDirty } = useCache();
   const callbacks = useCache();
@@ -290,19 +291,39 @@ export default function useFormState(initialState, options) {
       : inputProps;
   };
 
-  const inputPropsCreators = TYPES.reduce(
-    (methods, type) => ({ ...methods, [type]: createPropsGetter(type) }),
-    {},
-  );
-
-  return [
-    {
-      ...formState.current,
-      ...formState.controls,
+  const formStateAPI = useRef({
+    clearField: formState.clearField,
+    resetField: formState.resetField,
+    setField(name, value) {
+      formState.setField(name, value, true, true);
+    },
+    setFieldError(name, error) {
+      formState.setValidity({ [name]: false });
+      formState.setError({ [name]: error });
+    },
+    clear() {
+      formState.forEach(formState.clearField);
+      formOptions.onClear();
     },
-    {
-      ...inputPropsCreators,
-      [LABEL]: (name, ownValue) => getIdProp('htmlFor', name, ownValue),
+    reset() {
+      formState.forEach(formState.resetField);
+      formOptions.onReset();
     },
-  ];
+  });
+
+  // exposing current form state (e.g. values, touched, validity, etc)
+  // eslint-disable-next-line guard-for-in, no-restricted-syntax
+  for (const key in formState.current) {
+    formStateAPI.current[key] = formState.current[key];
+  }
+
+  const inputPropsCreators = {
+    [LABEL]: (name, ownValue) => getIdProp('htmlFor', name, ownValue),
+  };
+
+  INPUT_TYPES.forEach(type => {
+    inputPropsCreators[type] = createPropsGetter(type);
+  });
+
+  return [formStateAPI.current, inputPropsCreators];
 }

src/useState.js

@@ -6,7 +6,7 @@ function stateReducer(state, newState) {
   return isFunction(newState) ? newState(state) : { ...state, ...newState };
 }
 
-export function useState({ initialState, onClear, onReset }) {
+export function useState({ initialState }) {
   const state = useRef();
   const initialValues = useCache();
   const [values, setValues] = useReducer(stateReducer, initialState || {});
@@ -23,47 +23,33 @@ export function useState({ initialState, onClear, onReset }) {
     setError({ [name]: inputError });
   }
 
-  const clearField = name => {
+  function clearField(name) {
     setField(name);
-  };
+  }
 
-  const resetField = name => {
+  function resetField(name) {
     setField(
       name,
       initialValues.has(name) ? initialValues.get(name) : initialState[name],
     );
-  };
+  }
+
+  function forEach(cb) {
+    Object.keys(state.current.values).forEach(cb);
+  }
 
   return {
-    /**
-     * @type {{ values, touched, validity, errors }}
-     */
     get current() {
       return state.current;
     },
     setValues,
     setTouched,
     setValidity,
     setError,
+    setField,
     initialValues,
-    controls: {
-      clearField,
-      resetField,
-      clear() {
-        Object.keys(state.current.values).forEach(clearField);
-        onClear();
-      },
-      reset() {
-        Object.keys(state.current.values).forEach(resetField);
-        onReset();
-      },
-      setField(name, value) {
-        setField(name, value, true, true);
-      },
-      setFieldError(name, error) {
-        setValidity({ [name]: false });
-        setError({ [name]: error });
-      },
-    },
+    resetField,
+    clearField,
+    forEach,
   };
 }

test/useFormState.test.js

@@ -48,4 +48,13 @@ describe('useFormState API', () => {
     const [formState] = result.current;
     expect(formState.values).toEqual(expect.objectContaining(initialState));
   });
+
+  it('persists reference to the formState object', () => {
+    const firstRenderResult = { current: null };
+    const { result, rerender } = renderHook(() => useFormState());
+    [firstRenderResult.current] = result.current;
+    rerender();
+    expect(result.current[0]).toBe(firstRenderResult.current);
+    expect(result.current[0].setField).toBe(firstRenderResult.current.setField);
+  });
 });