機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。

useState

import { useState } from 'react';

const [id, setId] = useState<number>(1);
const [age, setAge] = useState<number>(25);
const [name, setName] = useState<string>('hoge');

このstateを別のコンポーネントで使いたい(propsに渡したい)となると

return (
  <ProfileComponent
    id={id}
    setId={setId}
    age={age}
    setAge={age}
    name={name}
    setName={setName}
  />
);

stateを追加したり削除したりしたときに修正が増えて非効率な感じがします。

useReducer

import { useReducer } from 'react';

type User = {
  id?: number;
  age?: number;
  name?: string;
};

type Action = User & {
  type: string;
};

const initialState: User = {
  id: 1,
  age: 25,
  name: 'hoge'
};

const reducer: React.Reducer<User, Action> = (state, action) => {
  switch (action.type) {
    case 'id': {
      return {
        ...state,
        id: action.id
      };
    case 'age': {
      return {
        ...state,
        age: action.age
      };
    case 'name': {
      return {
        ...state,
        name: action.name
      };
    default:
      return initialState;
  }
};

const [state, dispatch] = useReducer(reducer, initialState);

使うまでの準備段階で結構コードが多くなってしまいましたが、

// 入れる
dispatch({ type: 'id', id: 10 });

// 取り出す
console.log(state.id);

のような感じで、どの値に対しても、dispatch, stateがあれば操作が可能になるので
コンポーネントに渡したい場合は

return (
  <ProfileComponent
　  dispatch={dispatch}
    state={state}
  />
);

としておけば追加や削除が容易にできそうです。

参考

フック API リファレンス – React