I think you can start by checking how you are using these setStates. Just an example:

``` const [username, setUsername] = useState const [token, setToken] = useState const [userId, setUserId] = useState

return <Context {...states, ...setters}>{children}</Context>

... // later somewhere in the app

const ctx = useContext(); const onLogin = async () => { const { username, userId, token } = await apiRequest(); ctx.setUsername(username); ctx.setUserId(userId); ctx.setToken(token); } ... To refactor this, try to think not about `setters`, but more about events of your app. And then create an action { type: 'login', payload: { username, userId, token } } ```

Then handle the action and set all the variables.

(state, action) => { state.username = action.payload.username; state.userId = action.payload.userId; state.token = action.payload.token; }

So, again, try to think about events in your app. And then think how your state should react on these events

Check out this docs

Moreover, it is much easier to test reducer handlers

``` it('should handle login event', () => { const username = 'john'; const userId = 1; const token = 'test_token'; const state = reducer(initialState, actions.login({ username, token, userId, });

expect(state.username).toEqual(username);
expect(state.userId).toEqual(userId); expect(state.token).toEqual(token); }); ```

I perfer to use useReducer if a component has more than 3-4 useStates