Estoy trabajando en mi proyecto usando reaccionar, pero encontré un problema al usar el gancho setState.

Aquí está mi código:

 //state and handle function const [activeStep, setActiveStep] = React.useState(0); const handleStep = (index) => { setActiveStep(index); } //return component (I'm using mui) return ( <Stepper nonLinear activeStep={activeStep}> {steps.map((label, index) => ( <Step key={label} completed={false}> <StepButton color="inherit" onClick={handleStep(index)}> {label} </StepButton> </Step> ))} </Stepper> );

Con este código, la página ingresa al bucle infinito y la página no aparece. Pero si agrego un paréntesis adicional a la función handlestep:

 //added extra parantheses const handleStep = (index) => () => { setActiveStep(index); }

No entra en bucle infinito y todo parece funcionar. ¿Agregar paréntesis a las funciones de flecha cambia la funcionalidad o es un error del componente MUI?