interface params{ texts: string[]; handlePropertyTerm: (value:string) => void; } let SortOptions = React.memo(({texts, handlePropertyTerm}:params) => ( <> {texts.map((text) => ( <button key={text} defaultValue={text} onClick={() => handlePropertyTerm(text)}>{text}</button> ))} </> ));

 function App(){ let [sortProperty, setPropertyTerm] = React.useState(""); let sortPropertyTerm = React.useCallback((value) => { console.log("Callback value:", value); setPropertyTerm(value); }, []); console.log("App"); return ( <> <SortOptions texts={["hi", "bye"]} handlePropertyTerm={sortPropertyTerm}></SortOptions> </> ); }

El código que describí anteriormente crea dos botones, uno llamado hi y otro llamado bye , cada uno con una devolución de llamada que hace que sortProperty contenga "hola" o "adiós", según el botón en el que se hizo clic. Después de que la aplicación se cargue por primera vez y haga clic en el botón hi , registrará el valor de devolución de llamada = hola y la aplicación . Creo que esto se debe a que hubo un cambio de estado en la aplicación que provocó una nueva representación. Cuando hago clic en hi por segunda vez, se registran las mismas declaraciones. Cuando hago clic en hi por tercera vez, solo se registra el valor de devolución de llamada = hola .

¿Alguien puede explicar qué está causando que la aplicación se vuelva a mostrar la segunda vez que hago clic en hi pero no la tercera vez?