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?

CodePudding user response：

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

CodePudding user response：

Maybe this is not the answer to my question. But I hope I can help newbies like me.

According to the official explanation of the HOC: "A higher-order component (HOC) is an advanced technique in React for reusing component logic" and "a higher-order component is a function that takes a component and returns a new component", So if you just want to build a simple reuse component like LOADER, SNACKBAR (which is my usage scenario), HOC is perfectly suitable, but maybe you will worry about performance issues or not elegant enough. You can totally solve that with HOOK, For Snackbar code, I use MUIV5 and REACT 16.8.

useSnackbar.js

import { Alert, Slide, Snackbar } from "@mui/material";
import { useEffect } from "react";
import { useState } from "react";

export default function useSnackbar(text,type) {
    const [open, setOpen] = useState(false);
    const [message, setMessage] = useState('');
    const [duration, setDuration] = useState(3000);
    const [severity, setSeverity] = useState('info');

    useEffect(()=>{
        setMessage(text);
        setSeverity(type);
        setDuration(3000);
        setOpen(true);
    },[text,type]);
    const handleClose = (e, reason) => {
        if (reason === "clickaway") {
            return;
        }
        setOpen(false);
    };

    return (
        <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} autoHideDuration={duration}
            open={open} onClose={handleClose} TransitionComponent={Slide}>
            <Alert severity={severity} variant="filled" onClose={handleClose}>{message}</Alert>
        </Snackbar>
    );
}

USAGE.js

import useSnackbar from "../hooks/useSnackbar";

export default function Usage(){
  
    return (
        <>
        {useSnackbar("good","success")}
        </>
    );
}