return promise for value from hook-CodePudding

so I'm trying to be a clever-a$$ and return a promise from a hook (so I can await the value instead of waiting for the hook to give me the value after its resolved and the hook reruns). I'm attempting something like this, and everything is working until the resolve part. The .then doesnt ever seem to run, which tells me that the resolve I set isn't firing correctly. Here's the code:

function App() {
  const { valPromise } = useSomeHook();
  const [state, setState] = React.useState();
  
  React.useEffect(() => {
    valPromise.then(r => {
        setState(r);
    });
  }, []);
  
  if (!state) return 'not resolved yet';
  return 'resolved: '   state;
}

function useSomeHook() {
  const [state, setState] = React.useState();
  const resolve = React.useRef();
  const valPromise = React.useRef(new Promise((res) => {
    resolve.current = res;
  }));
  
  React.useEffect(() => {
    getValTimeout({ setState });
  }, []);
  
  React.useEffect(() => {
    if (!state) return;
    resolve.current(state);
  }, [state]);
  
  return { valPromise: valPromise.current };
}

function getValTimeout({ setState }) {
  setTimeout(() => {
    setState('the val');
  }, 1000);
}

and a working jsfiddle: https://jsfiddle.net/8a4oxse5/

I tried something similar (re-assigning the 'resolve' part of the promise constructor) with plain functions, and it seems to work:

let resolve;

function initPromise() {
  return new Promise((res) => {
    resolve = res;
  });
}

function actionWithTimeout() {
  setTimeout(() => {
    resolve('the val');
  }, 2000);
}

const promise = initPromise();
actionWithTimeout();
promise.then(console.log);

jsfiddle: https://jsfiddle.net/pa1xL025/

which makes me think something is happening with the useRef or with rendering.

** update **

so it looks like the useRefs are working fine. its the final call to 'res' (or resolve) that doesn't seem to fulfill the promise (promise stays pending). not sure if a reference (the one being returned from the hook) is breaking between renders or something

CodePudding user response：

If you use this code the problem is gone:

const valPromise = React.useRef();
if (!valPromise.current) {
    valPromise.current = new Promise((res) => {
        resolve.current = res;
    })
}

Normally you shouldn't write to ref during render but this case is ok.

Explanation

When you had this initially:

const valPromise = React.useRef(new Promise((res) => {
    resolve.current = res;
}));

the promise here is actually recreated on each render and only the result from first render is used.

From the docs:

const playerRef = useRef(new VideoPlayer());

Although the result of new VideoPlayer() is only used for the initial render, you’re still calling this function on every render. This can be wasteful if it’s creating expensive objects.

So in your case that meant the resolve.current would be updated on each render. But the valPromise remains the initial one.

Also since the expression passed to useRef runs during rendering one shouldn't do there anything that you would not do during rendering, including side effects - which writing to resolve.current was.