Form Hooks

input-state.hook.ts

import { useCallback, useEffect, useRef, useState } from 'react';

import { FIELD_THROTTLE_RATE } from '../../components/form/form.constants';
import { getFakeChangeEvent } from '../../components/form/utils/form-events.utils';
import { FormValue } from '../../data/common/types/common.types';

import { useThrottledCallback } from './throttled-callback.hook';

export function useInputState<V extends FormValue = FormValue>(
  initialValue: V,
  onChange: (e: React.ChangeEvent<HTMLInputElement>, value: V) => void,
) {
  // Could be initialized with a ref from the parent:
  const inputRef = useRef<HTMLInputElement>(null);
  const [value, setValue] = useState<V>(initialValue);

  // If initialValue changes, propagate the change to state:
  useEffect(() => setValue(initialValue), [initialValue]);

  // TODO: Maybe we could create a useDebouncedCallback instead?
  const throttledOnChange = useThrottledCallback(onChange, FIELD_THROTTLE_RATE, [onChange]);

  // We could change updateValue to make it controlled or uncontrolled:
  const updateValue = useCallback((
    nextValueOrF: V | ((prevValue: V) => V),
    e: React.ChangeEvent<HTMLInputElement> = null,
    immediate: boolean = false,
  ) => {
    const event = immediate && e || getFakeChangeEvent(inputRef.current);
    const cb = immediate ? onChange : throttledOnChange;

    if (typeof nextValueOrF === 'function') {
      setValue((prevValue) => {
        const nextValue = nextValueOrF(prevValue);

        cb(event, nextValue);

        return nextValue;
      });
    } else {
      setValue(nextValueOrF);

      cb(event, nextValueOrF);
    }
  }, []);

  return { inputRef, value, updateValue };
}