如何从promise里面返回useEffect

Question

I am creating my first custom hook. I would like the hook to return the deviceType which is the result of a Promise in the hook.

Hook:

export default function useDeviceType() {
  // Finds the user's device type and sets the
  // screen orientation appropriately.
  useEffect(() => {
    getDeviceTypeAsync().then((deviceType) => {
      const orientationPromise = setScreenOrientation(deviceType);
      return deviceType
    });
  }, []);
}

Use of hook:

export default function DevelopmentScreen() {
  const deviceType = useDeviceType();
  console.log(deviceType)
  return null;
}

Console:

undefined

I may be having difficulty understanding the useEffect hook but I believe it should just fully run once here.

Is the item being returned still undefined because the Promise has not resolved? If so, then how am I able to use the deviceType inside setScreenOrientation ?

When I console.log(deviceType) inside the useEffect hook I get the appropriate response:

2

Thank in advance for the help in understanding this!

Final Edit:

export default function useDeviceToSetOrientation() {
  const [orientation, setOrientation] = useState(null);
  useEffect(() => {
    getDeviceTypeAsync().then((type) => {
      const orientationPromise = setScreenOrientation(type);
      orientationPromise.then((data) => {
        setOrientation(data);
      })
    });
  }, []);
  return orientation
};

export default function DevelopmentScreen() {
  const orientation = useDeviceToSetOrientation();
  console.log(orientation)
  return null;
}

Output (correct):

4

Answer 1

export default function useDeviceType() {
  const [deviceType, setDeviceType] = useState();
  useEffect(() => {
    getDeviceTypeAsync().then((type) => {
      const orientationPromise = setScreenOrientation(type);
      setDeviceType(type);
    });
  }, []);
  return deviceType
}

This should fix the behavior and then deviceType will be accessible through const deviceType = useDeviceType(); .

What you seem to be misunderstanding here is how returning values from useEffect work. You can read about ithere , but we actually use it to create cleanup functions that will run on our component's unmount.

Edit: you can also see in React's docs how custom hooks are supposed to return values.