React custom hook to handle state as an object in functional components similar to local state management in class based components.

React.customhook.useStateObj.js

import React, { useState } from 'react';
import { isEmpty, isNil } from 'ramda';

/**
 * Custom hook to handle state as an object in functional components similar to local state management in class based components.
 ** Returns a stateful value and a function to update it.
 * @param {object} initialStateObj
 * @returns { [{},React.Dispatch<React.SetStateAction<{}>>]}
 */
const useStateObj = (initialStateObj = {}) => {
  const [state, setState] = useState(initialStateObj);

  const setStateObj = (updatedState) => {
    if (typeof updatedState === 'function') {
      setState((prevState) => {
        const newState = updatedState(prevState);
        if (isNil(newState) || isEmpty(newState)) {
          return initialStateObj;
        }
        return newState;
      });
    } else if (isNil(updatedState) || isEmpty(updatedState)) {
      setState(initialStateObj);
    } else {
      setState((prevState) => ({ ...prevState, ...updatedState }));
    }
  };

  return [state, setStateObj];
};

export default useStateObj;