How to return from promise inside useEffect

November 24, 2021

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!

>Solution :

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 it here, 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.