Javascript 从React钩子返回JSX元素是一种不好的做法吗？

我为警报框编写了以下钩子：

import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';

export const useAlert = () => {
    const [open, setOpen] = React.useState(false);
    const [message, setMessage] = React.useState('');

    const openAlert = (message) => {
        setOpen(true);
        setMessage(message);
    };

    const closeAlert = (event, reason) => {    
        setOpen(false);
    };

    return {
        openAlert,
        Alert: <Snackbar open={open} onClose={closeAlert}><MuiAlert onClose={closeAlert}>{ message }</MuiAlert></Snackbar>
    };
};

从“@material ui/lab/Alert”导入MuiAlert；
从“@material ui/core”导入{Snackbar}；
从“React”导入React；
导出常量useAlert=（）=>{
const[open，setOpen]=React.useState（false）；
const[message，setMessage]=React.useState（“”）；
const openAlert=（消息）=>{
setOpen（真）；
设置消息（消息）；
};
const closeAlert=（事件、原因）=>{
setOpen（假）；
};
返回{
openAlert，
警报：{message}
};
};

我将这个钩子集成到其他功能组件中，因此：

import { useAlert } from './useAlert';

const Dashboard = () => {
    const { openAlert, Alert } = useAlert();
    return (
        <div>{ Alert }</div>
    )
};

从“/useAlert”导入{useAlert}；
常量仪表板=（）=>{
const{openAlert，Alert}=useAlert（）；
返回(
{Alert}
)
};

我知道从React钩子返回功能组件是一种不好的做法，因为钩子会在每次渲染时生成组件的新实例

---

然而，在这里，我返回的是一个JSX元素，而不是一个组件。这仍然是一种糟糕的做法吗？

从自定义挂钩返回JSX是一种反模式的做法。虽然它可以工作，但几乎没有理由从自定义挂钩返回JSX

返回JSX的函数可以简单地转换为带有钩子的函数组件。把它写下来作为一个组件将在很多方面帮助你

• 提供传递道具以轻松控制行为的灵活性
• 此外，它更容易记忆功能组件，以防止在没有任何更改的情况下进行额外渲染。您也可以使用自定义挂钩来执行此操作，但随后必须使用

  usemo

• 它使定义清晰的元素层次结构变得更容易