javascript - Using too many useState hooks in react. How do I refactor this? - Stack Overflow

admin管理员组

文章数量:1194126

the useState hooks are great. I mainly use the useState hooks to initialise certain states, and I also pass the function to children components to change the states. However, I realise I am starting to use too many useState hooks in my parent page component. This looks and feels wrong, because I am starting to have about 6-10 useState hooks in the parent page component.
Without showing the code, Is there a better way to do this? Maybe a better practice, or a better way to refactor.
Thanks

the useState hooks are great. I mainly use the useState hooks to initialise certain states, and I also pass the function to children components to change the states. However, I realise I am starting to use too many useState hooks in my parent page component. This looks and feels wrong, because I am starting to have about 6-10 useState hooks in the parent page component.
Without showing the code, Is there a better way to do this? Maybe a better practice, or a better way to refactor.
Thanks

• javascript
• reactjs
• react-hooks
• react-component
• use-state

Share Improve this question Follow asked Jul 1, 2020 at 16:46 Daryll Daryll 57133 gold badges99 silver badges1616 bronze badges 3

• 5 If your state gets frequently changed in predictable ways and the state is related (e.g., not just a bunch of inputs in a form with different values), then useReducer might be a good way to go. – Robert Moore Commented Jul 1, 2020 at 16:51
• 2 This might help. reactjs.org/docs/… – Julio de Leon Commented Jul 1, 2020 at 16:58
• 2 I agree with Robert Moore. I recently refactored a component that was bloated with individual states and it is a major improvement. Just to add to the suggested reading kentcdodds.com/blog/should-i-usestate-or-usereducer – Matt Fikowski Commented Jul 1, 2020 at 17:33

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 25

Whenever you encounter a problem like this you should first look if you can split your component into multiple smaller ones. However there are scenarios where that's not an option. In those cases I would advice using useReducer.

// before

const {cache, setCache } = useState({});
const {posts, setPosts } = useState({});
const {loading, setLoading } = useState(false);

// Would become after refactor

const initialState = {
  cache: {},
  posts:{},
  loading: false
}

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

I believe the best way of optimising useStates can be done by decoupling the unnecessary relationships. Whether you do that Inside the react component with useState, share them with useContext, useReducer or any other method. Putting everything in a single object tree does not optimise performance. So changing the above into a single useReducer merely moves the problem elsewhere.

The most optimised solution is going to be to only couple the necessary dependencies. Ie use multiple state handlers - ie multiple context providers, or multiple useReducers, zustand or do something clever with new useSignal which is essentially going to do the same thing by only listening on the minimum amount of diffs.

You can still subscribe between those multiple states if needed via a central useEffect.

A crude example with useContext:

<ProviderStateX>
  <ProviderStateY>
    <ProviderStateZ>

      <MyComNeedsX>
        <MyCompNeedsXY>
          <MyCompChildNeedsY>
        </>
        <MyCompNeedsXZ>
          <MyCompChildNeedsZ>
        </>
      </> 
    </> 
  </> 
</> 

There are tidier options without nesting Providers, but that example is for 'context' pardon the pun.

A better, cleaner solution is probably going to be using signal, multiple zustand states or native js proxies and only listening in the single thing that your react component cares about to prevent unnecessary re-render.

本文标签： javascriptUsing too many useState hooks in react How do I refactor thisStack Overflow