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
Advertisement
Answer
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.