Search code examples
reactjsreact-reduxreact-hoc

React Multiple Higher-Order Components without redux

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?

Solution

  • 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);