En un enlace anidado: ¿cómo se puede saber si ya se invocó en el componente actual (instancia) y acceder a los valores calculados/guardados previamente?
Preferiblemente sin que el autor del Component /el usuario del enlace tenga que saber sobre esto y no tenga que hacer nada especial para que funcione.
Un ejemplo para ilustrar el problema:
const useNestedHook = () => { // Some heavy work with the same result for each component instance. // Is it possible to remember the result of this work when // this hook is used again in the same component instance? // So I would like to save a state which all uses of useNestedHook // could access as long as they are in the same component instance. } const useHookA = () => { useNestedHook(); }; const useHookB = () => { useNestedHook(); }; const Component = () => { useHookA(); // Would like to avoid useNestedHook repeating its work since it's // used in the same component and would have this same result (per definition) // Preferably without the Component author having to know anything about this. useHookB(); };Algo así como un estado compartido "con nombre", que daría acceso al mismo estado compartido (en la misma instancia de componente) sin importar en qué enlace se use. Cada instancia de componente tiene su propio estado separado como de costumbre. Tal vez algo como:
const [state, setState] = useSharedState("stateId", initialValue);No, eso no es posible. Cada llamada a useState() siempre estará separada de otras llamadas a useState() .
El componente no puede usar los ganchos como en su ejemplo, pero el autor del componente no necesariamente tiene que preocuparse por los detalles de implementación.
Una solución dependería del caso de uso.
Un estado se define por el lugar en el que se escribe la llamada useState() en el código (consulte la explicación ), que no está directamente relacionado con la instancia. Es decir, dos llamadas useState() y dos instancias son 4 valores de estado.
Puede usar el estado compartido, por ejemplo, usando context , pero luego el estado también sería compartido por todas las instancias, no solo los ganchos (que no desea).
Por lo tanto useNestedHook() siempre estará "separado", pero si puede usar el estado compartido y solo le importa el "almacenamiento en caché" , y puede aceptar que useNestedHook() se llame dos veces (es decir, omita la costosa operación si el resultado es lo mismo), entonces puede usar useEffect() . Es decir, la llamada dependería del valor , no de la instancia ni del gancho.
Por ejemplo, si sus ganchos A y B calcularan opcionalmente dos valores diferentes, que necesitan el mismo valor useNestedHook() , podría crear un gancho con opciones en su lugar, por ejemplo:
const useHookAB = ({ A, B }) => { const expensiveValue = useNestedHook(); if( A ){ /* do what useHookA() was doing */ } if( B ){ /* do what useHookB() was doing */ } }; const Component = () => { useHookAB({ A: true, B: true }); };No puedo imaginar otra razón en este momento por la que querrías llamar a los anzuelos de esa manera.
La solución obvia sería:
const useHookA = ( value ) => { // ... }; const useHookB = ( value ) => { // ... }; const Component = () => { const value = useNestedHook(); useHookA( value ); useHookB( value ); };Pero puedo imaginar razones por las que no puedes (o no te gusta) hacerlo de esa manera.