有办法错开React Hooks吗？

Question

I'm trying to avoid using conditional statements with React Hooks, but I've reached a point where I may need some advanced techniques. I have here 3 hooks that depend on each other. Each hook returns a tuple [bool, object] that the next hook requires to execute.

Internally, each hook is an asynchronous operation and I don't have access to modify them.

const [loadingA, resultA] = useHook1(); 
const [loadingB, resultB] = useHook2(resultA.prop1); // Error!
const [loadingC, resultC] = useHook3(resultB.prop2); // Error!

if (loadingA || loadingB || loadingC) {
   return <span>loading...</span>;
}


// All results are required for this component.

return <MyComponent x={resultA.x} y={resultB.y} z={resultC.z} />; 

The above breaks because useHook2 and useHook3 require the arguments to be defined. Unfortunately, I can't use a condition like this:

// this is not allowed

if (!loadingA) {
   const [loadingB, resultB] = useHook2(resultA.prop1);
}

Does anyone have any tips on how to stagger hooks such that they execute based on the result of a previous asynchronous hook?

Answer 1

Return some default value in hook2 and hook3 if the parameter is undefined . If you can't modify hook2 or hook3 directly, you can always wrap them in another hook (useHook2Wrapper, useHook3Wrapper) and do the undefined value validation.

const [loadingA, resultA] = useHook1(); 
const [loadingB, resultB] = useHook2(resultA && resultA.prop1);
const [loadingC, resultC] = useHook3(resultB && resultB.prop2);

const useHook2 = (someProp) => {
  if (!someProp) {
    return [false, undefined];
  }

  // rest of the hook logic
}