Mi problema que no estoy seguro de cómo resolver es que tengo una tabla con datos, cada fila tiene un botón de detalles que navega a una página detallada. Tenemos un componente personalizado de flecha hacia atrás en el que podemos hacer clic y volvemos al enlace dado:

 const BackArrow = ({ link }) => { const history = useHistory(); const handleClick = () => { history.push(link); }; return ( <IconButton className="back-arrow" onClick={handleClick}> <ArrowBackIcon /> </IconButton> ); };

 <BackArrow link="/some-link" />

Funciona perfectamente excepto una cosa importante. No es fácil de usar y tiene un gran problema de rendimiento.

La tabla que cargamos es una matriz que inicialmente toma 25 objetos al azar y al cargar más podemos cargar 25 más.

El problema es que cuando hacemos clic en el botón de detalles en una de las filas, navegamos a la página de detalles y luego hacemos clic en la flecha hacia atrás, como puede ver arriba, cargamos un enlace que es el enlace de la página desde la que navegamos. . Esto activa una nueva solicitud para la tabla, por lo que cargará 25 filas, pero diferentes. El problema de rendimiento es bastante obvio, cada vez que regresamos, busca los datos. Tampoco es fácil de usar, porque cada vez que el usuario revisa una página detallada y retrocede, las filas cambian, por lo que pierde el estado desde el que navegó.

Consolé registrar el estado actual y previo de la tabla y tiene los datos. Carga de la página inicial: el estado actual es una matriz de 25 objetos, el anterior es nulo. Vamos a un detalle que presiona la flecha hacia atrás, el estado actual es una nueva matriz de 25 objetos, pero ahora podemos ver que el prevState tiene ese otro 25 conjunto de objetos que teníamos antes de alejarnos.

¿Cómo puedo modificar la función de flecha hacia atrás para que cuando navegue de regreso a una página use el estado del que nos alejamos? entonces, en este caso, el prevState?