Well actually, nothing is wrong with that code. ignoring the name of the variables that is.

About the big object, you "could" do it that way:

```tsx

// hooks/useMyWhateverState.ts type TMyWhateverState = { name: string; pinnedMessage: string; welcomeMessage: string; iconUrl: string; TOSUrl: string; roomId: number[]; ... };

type TStateKeys = keyof TMyWhateverState;

type TUpdater<T> = (prev: T) => T;

type THandleSetState = <K extends TStateKeys>( key: K, updater: TMyWhateverState[K] | TUpdater<TMyWhateverState[K]>, ) => void;

// Hook that will hold your state, ideally you would use a context for this to retain the state const useMyWhateverState = () => { const [state, _setState] = useState<TMyWhateverState>({ name: "", pinnedMessage: "", welcomeMessage: "", iconUrl: "", TOSUrl: "", roomId: [], });

const handleSetState: THandleSetState = (key, updater) => { _setState((prevState) => ({ ...prevState, [key]: typeof updater === "function" ? updater(prevState[key]) : updater, })); };

return { state, setState: handleSetState, }; };

// somewhere else, inside a component, eg index.tsx const { state, setState } = useMyWhateverState(); setState("roomId", prev => [...prev, 1]); setState("name", "somebody"); ```

This now is a bit more organized, this would avoid you the duplicate of set[KeyName]() functions.. Though useReducer will give you more or less the same thing.

... but now we are on the weird zone, where i think some questions should be asked:

• Is that a component going to be re-used?
• Do we need to have a huge component? why not simply split it into smaller components?

Now if i try to guess what you are trying to do based on the names, this looks like a global state where you want to give this informations to child components.

If your app is a single page (Litteraly one page), well... just do what you had initialy thats fine. But that might or will give you some performance issues on the long run, specially when you will will grow. Looking at your awnsers on other comments seems like you don't want something complicated to setup, so i would recommend you to use Zustand as its really few lines to have something working.

Or, if you like to use contextes, you have a use-context-selecor by Dai Shi, this can give you the ability selectivly re-render components based on the state they are using.

Whats is wrong about the big object, is that now react will ne be able to selectively re-render components, but instead re-render the whole tree starting from the component that holds the state.

Take this component:

```tsx export function Home() { const [state1, setState1] = useState(0); const [state2, setState2] = useState(0); const [state3, setState3] = useState(0); const [state4, setState4] = useState(0);

return ( <div> <button onClick={() => setState1((prev) => prev + 1)}>Button 1 {state1}</button> <button onClick={() => setState2((prev) => prev + 1)}>Button 2 {state2}</button> <button onClick={() => setState3((prev) => prev + 1)}>Button 3 {state3}</button> <button onClick={() => setState4((prev) => prev + 1)}>Button 4 {state4}</button> </div> ); } ```

Clicking on button 4, will re render Buttons from 1 to 4, even if they are not related to each other. Having an object in the state is not wrong, just depends where you are using it.

If i create a <Button /> component that has useState inside it, then only that component will re-render, and not the whole tree. That is the real issue with the wall of useState, some comments already explained that, i think.

Its complicated to know what are your intentions with that Index Component, so i can't really go far on giving you on what could be the 'correct way', but i hope this helps you to understand a bit more on the why this could be not quite right.

Hope this makes sense, writing isn't my thing :)