value of useState not being set on initial render - reactjs

Question

I have the isDesktop boolean that should be set to true or false depending on the sceensize and this works however on initial render it doesn't set to true/false, how can I set this on intial render?
const [isVisible, setIsVisible] = useState(false)
const [isDesktop, setIsDesktop] = useState(window.innerWidth)
console.log(isDesktop)
useEffect(() => {
window.addEventListener("scroll", UpdateScrollPosition);
window.addEventListener("resize", displayWindowSize);
return () => window.removeEventListener("scroll", UpdateScrollPosition);
}, []);
const UpdateScrollPosition = () => {
const scrollPos = window.scrollY
if( scrollPos < 520) {
return setIsVisible(false)
}else if (scrollPos >= 520 && scrollPos <= 1350) {
return setIsVisible(true)
}else if (scrollPos > 1350) {
return setIsVisible(false)
}
}
const displayWindowSize = () => {
let w = window.innerWidth;
if(w >= 500) {
return setIsDesktop(true)
} else {
return setIsDesktop(false)
}
}

Answer 1

window.innerWidth is not a boolean. If you intented to set it to true for a value other than 0 you can do:
const [isDesktop, setIsDesktop] = useState(!!window.innerWidth)
You can also compare it to your breakpoint:
const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 500);
EDIT:
If you want to use isDesktop in the UpdateScrollPosition handler you need to unregister the old handler and register a new handler as a listener, when isDesktop has changed:
const UpdateScrollPosition = useCallback(() => {
// this now depends on isDesktop
console.log(isDesktop);
// .... other code
}, [isDesktop]); // IMPORTANT: add isDesktop here as a dependency
useEffect(() => {
window.addEventListener("scroll", UpdateScrollPosition);
return () => window.removeEventListener("scroll", UpdateScrollPosition);
}, [UpdateScrollPosition]); // IMPORTANT: Add UpdateScrollPosition here as a dependency
What does this?:
useCallback will recreate your handler when the isDesktop dependency changes. Your effect will re-bind the handlers when UpdateScrollPosition changes (which is always the case when isDesktop changes as we added it as a dependency there).