Easy to use Generic Typescript React custom Hook for Handling multiple inputs and saving state for properties of type or object.

usePartialState.tsx

import react, { useState } from "react";

const usePartialState = <T extends Partial<T>>(): [T | {}, (fieldName: string, value: any) => void, (state: T) => void] => {
    const [state, setState] = useState<T | {}>({});

    const setStateByFiled = (fieldName: string, value: any) => {
        setState(_s => {
            return {
                ..._s,
                [fieldName]: value,
            };
        });
    }

    const setEntireState = (data: T) => {
        setState(data);
    }

    return [
        state,
        setStateByFiled,
        setEntireState
    ];
}

export default usePartialState;

usePartialStateExample.tsx

type MyExample = {
    myId: number;
    someTitle: string;
};

interface MyExampleState extends Partial<MyExample> { }

const MyComponent: React.FC = () => {
    const [exampleState, setExampleStateByFiled, setExampleState] = usePartialState<MyExampleState>();

    const clearAll = () => {
        setExampleState({});
    }

    return (
        <div>
            <p>{exampleState?.myId} | {exampleState?.someTitle}</p>
            <button onClick={() => setExampleStateByFiled("myId", 1)}>Change Id</button>
            <button onClick={() => setExampleStateByFiled("someTitle", "hey everyone!")}>Change title</button>
            <button onClick={clearAll}>Clear all</button>
        </div>
    )
}