1

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
    })

0 Answers0