React Multiple Higher-Order Components

Your syntax is equivalent to doing:

<StateProvider>
  <LabelProvider>
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  </LabelProvider>
</StateProvider>

The performance hit will come from how these HOC are implemented. You would probably have to look at each of them.

Example:

  • Theme Provider HOCs usually store a bunch of colors and variables in the React context. So using only one at the very root of your App is enough.
  • One could imagine that your LabelProvider simply adds an extra span before your component, in which case there is little to worry about
  • StateProviders like redux usually inject props in the component just below them so you don't really have a choice but to use them whenever you need state objects.

In conclusion, there are no hard rules. Your main focus should be on understanding what these HOC do and to try to limit unnecessary re-renders of your app.