1

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?

HappyKoala
  • 191
  • 1
  • 11
  • Generally, just the input: The ecosystem has moved from HOCs a lot and they are almost never used nowadays, except when working with legacy class components. If you knew that, fine, but if not I wanted to make you aware :) – phry Nov 14 '22 at 10:38
  • https://stackoverflow.com/questions/64754560/how-to-implement-material-ui-snackbar-as-a-global-function I really don't know much because I am a learner and not a professional programmer. And with this I achieved the functionality I wanted, the problem came to me when I was making the second feature. – HappyKoala Nov 14 '22 at 10:52
  • 1
    It's not bad knowing about the existance of HOCs, but nowadays something like that would probably be done with a custom hook. I'd encourage you to look into those things a little more. – phry Nov 14 '22 at 11:15
  • I really appreciate @phry your guidance. hook does totally solve my problem: "performance concerns and global reuse". I changed my HOC code to HOOK rules and changed the function to USEEFFECT and it is now working well for me. Thank you very much. – HappyKoala Nov 14 '22 at 12:39

1 Answers1

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);
kind user
  • 40,029
  • 7
  • 67
  • 77