You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
useColorMode's default onChange function is triggered as soon as the composable is called. Unless the disableTransition: false option is used, the page will reflow and negatively impact performance on complex pages.
The onChange function will be triggered once per useColorMode usage whenever we toggle the dark mode, triggering a reflow each time.
This also affects useDark since it directly uses useColorMode.
Two mitigating solutions until this is fixed:
Use useDark and useColorMode once and share the ref across the app to avoid unnecessary calls to the onChange functions. This is not possible whenever a library uses the composable.
Use disableTransition: false to avoid page reflows, but then again, if a library doesn't use the option, we have the same problem.
Potential fixes I can think of:
Do not call the onChange function on usage
Do not call the onChange function if nothing changed
Do not register the same onChange function multiple times
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
Please provide an online case about the issues,thx.
@pkc918 Added repro + screenshot. I tried with vueuse v9 and the problem is not there. I think it happens since the disableTransitions default has been set to true: 5c82cf3
Describe the bug
The bug has two parts:
useColorMode
's default onChange function is triggered as soon as the composable is called. Unless thedisableTransition: false
option is used, the page will reflow and negatively impact performance on complex pages.useColorMode
usage whenever we toggle the dark mode, triggering a reflow each time.This also affects
useDark
since it directly usesuseColorMode
.Two mitigating solutions until this is fixed:
useDark
anduseColorMode
once and share the ref across the app to avoid unnecessary calls to the onChange functions. This is not possible whenever a library uses the composable.disableTransition: false
to avoid page reflows, but then again, if a library doesn't use the option, we have the same problem.Potential fixes I can think of:
Reproduction
https://stackblitz.com/edit/vitejs-vite-ksex6y
Here is what it looks like in the performance profiler when I run useDark every second.
![image](https://private-user-images.githubusercontent.com/1129404/334817588-324c8f64-3bc6-4dd5-9506-344975927e99.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwMzAxODIsIm5iZiI6MTcxODAyOTg4MiwicGF0aCI6Ii8xMTI5NDA0LzMzNDgxNzU4OC0zMjRjOGY2NC0zYmM2LTRkZDUtOTUwNi0zNDQ5NzU5MjdlOTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MTBUMTQzMTIyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2Q0YTdhMzAyNjZlNzZmZWE4NDFhYjAxYjZkOWUwOTFiZTIwZTA1M2QzMGQ5MGQ2YzU1OGE4N2QzOTFiOTFiOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.iQ8mWNbY1NO7WMeKtszh9z8XybQzq1ZaeTvFaHwV2ps)
System Info
Vueuse v10, doesn't happen in v9
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: