Quiero guardar algunos datos en localForage desde dentro de mi componente antes de que cambie la ruta, ya que no tengo ningún estado global o de nivel superior. No quiero guardar cada vez que el usuario realiza un cambio, sino solo cuando el usuario está a punto de abandonar el componente/ruta actual . He leído dos maneras de hacer esto.

Primero, leí que puedo llamar a funciones en useEffect return(), pero parece que dado que las llamadas a localForage son asíncronas , los datos no se guardarán a tiempo. La aplicación irá a la nueva ruta antes de que se guarden los datos. La forma en que lo intenté se ve así:

 useEffect(() => { return () => { localForage.setItem(name, item) .then(() => { console.log("I didn't save in time."); }); }; }, []);

En segundo lugar, he leído sobre la ejecución de tareas antes de salir de una ruta usando los ganchos onLeave como se describe aquí .

Estos ganchos son útiles para varias cosas, como solicitar autenticación cuando se ingresa una ruta y guardar cosas en el almacenamiento persistente antes de que se desmonte una ruta.

Esto suena como lo que necesito, pero la función o el comando que quiero ejecutar se encuentra en mi componente y debe llamarse desde mi archivo App.js de esta manera.

 <Switch> ... <Route path = '/mypath' onLeave={functionToCall} /> </Switch>

Entonces parece que no puedo llamar a las funciones del componente desde el archivo App.js.

Mi pregunta es, ¿cualquiera de estos enfoques puede funcionar para mí? Si no, ¿qué puedo hacer para guardar datos en localForage antes de que cambie la ruta?