Object state hook

useObjectState.jsx

import { useState } from 'react';
import { merge } from 'lodash';

function useObjectState(defaultVal = {}) {
  const [state, setState] = useState(defaultVal);
  const updateState = (newState) => {
    setState((previousState) => ({ ...previousState, ...newState }));
  };
  const deepMergeState = (newState) => {
    setState((previousState) => merge({}, previousState, newState));
  };
  return [state, setState, updateState, deepMergeState];
}

export default useObjectState;

useObjectState.md

// example usage:
const [timeRange, setTimeRange, updateTimeRange] = useObjectState({
  startTime: '00:00',
  endTime: '00:00',
});

updateTimeRange({ startTime: '14:00' });

const resetTime = () => setTimeRange({
  startTime: '00:00',
  endTime: '00:00',
});