Estoy siguiendo los ejemplos en https://mui.com/components/snackbars/ y necesito entender las diferencias entre la palabra clave de función y la palabra clave de flecha para este código a continuación.

Por lo que he leído en línea, las dos formas de llamar a las funciones son casi idénticas. Pero tengo un caso a continuación donde esto no es cierto.

Esto se aplica a todas las funciones en este código de ejemplo.

Error al usar function() . No hay error al usar el código de muestra que usa la const myFunction() => {} .

Código de muestra

 const handleClick = () => { setOpen(true); };

caso de error

 function handleClick() { setOpen(true); };

Mensaje de error

 Unhandled Runtime Error Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

código completo

 import * as React from 'react'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import IconButton from '@mui/material/IconButton'; import CloseIcon from '@mui/icons-material/Close'; export default function SimpleSnackbar() { const [open, setOpen] = React.useState(false); const handleClick = () => { setOpen(true); }; const handleClose = (event, reason) => { if (reason === 'clickaway') { return; } setOpen(false); }; const action = ( <React.Fragment> <Button color="secondary" size="small" onClick={handleClose}> UNDO </Button> <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose} > <CloseIcon fontSize="small" /> </IconButton> </React.Fragment> ); return ( <div> <Button onClick={handleClick}>Open simple snackbar</Button> <Snackbar open={open} autoHideDuration={6000} onClose={handleClose} message="Note archived" action={action} /> </div> ); }