I have some expensive calculations performed when user switches from mobile to desktop resolution, so I need to track changes between resolutions and execute calculations only when breakpoint is changed.
component$(() => {
const isMobile = useSignal(true)
const prevIsMobile = useSignal(true)
useOnWindow(
'resize',
$(() => {
isMobile.value = window.innerWidth < 768
})
)
useVisibleTask$(({ track, cleanup }) => {
track(() => isMobile.value)
isMobile.value = window.innerWidth < 768
if (prevIsMobile.value !== isMobile.value) {
// some calculations
}
cleanup(() => {
prevIsMobile.value = isMobile.value
})
})
....
})
I expected in cleanup
method to save value of isMobile
to prevIsMobile
but looks like they are synced assigning values this way prevIsMobile.value = isMobile.value
.
Figured it out. I shouldn't have done it in React way. It works like this
useVisibleTask$(({ track }) => {
track(() => isMobile.value)
isMobile.value = window.innerWidth < 768
if (prevIsMobile.value !== isMobile.value) {
// some calculations
}
prevIsMobile.value = isMobile.value
})