React Multiple Higher-Order Components without redux

Question

By the function name I'm sure you can understand the scenario of it just wanting to add some global components.

export default withLoading(withSnackbar(GlobalDropZone));

My question was exactly the same as React Multiple Higher-Order Components , but it seems it didn't get an accurate answer. I browsed through How do you combine/compose multiple Higher Order Components (react.js)? as well. It seems the existing approach is to use a third party plugin such as REDUX. But I'm wondering if my code will create performance issues? Or is there a more elegant way to write it?

Answer 1

But I'm wondering if my code will create performance issues?

The only performance difference will be the fact, that GlobalDropZone will re-render if props passed by withLoading or withSnackbar will change (it depends if your GlobalDropZone is a PureComponent or a FC (with memo or not).

Or is there a more elegant way to write it?

You could use compose function from e.g. lodash to make it a bit more cleaner.

export default compose(withLoading, withSnackbar)(GlobalDropZone);