My component needs to know if it needs to be hydrated

[sakura-yinfeichen]

1. SSR application: hydration mismatch, because isClient has different values on the server and client

   const useScreen1 = () => {
     const isClient = typeof window !== 'undefined';
     // SSR application: hydration mismatch, because isClient has different values on the server and client
     const isPhone = ref(isClient ? window.innerWidth <= 600 : false);
   
     const update = () => {
       isPhone.value = window.innerWidth <= 600;
     };
     onMounted(() => {
       update();
       window.addEventListener('resize', update);
     });
   
     onUnmounted(() => {
       window.removeEventListener('resize', update);
     });
   };

2. Getting the value in the mounted lifecycle hook seems a bit strange

   const useScreen2 = () => {
     const isPhone = ref(false);
   
     const update = () => {
       isPhone.value = window.innerWidth <= 600;
     };
     onMounted(() => {
       // Updating isPhone only after mounted can solve the hydration mismatch error, but updating the value after mounted causes UI changes, affecting performance and user experience
       // Additionally, not all components are SSR applications; these directly client-rendered components can only get the accurate value in the onMounted lifecycle, which looks strange
       update();
       window.addEventListener('resize', update);
     });
   
     onUnmounted(() => {
       window.removeEventListener('resize', update);
     });
   };

3. My component needs to know if it needs to be hydrated

   const useScreen3 = () => {
     const isClient = typeof window !== 'undefined';
     const DEFAULT_STATE = false;
     // I hope there is a function like isHydrating that can tell me if it is currently hydrating (or needs to be hydrated), so as to get the accurate value faster without causing hydration mismatch
     const isPhone = ref(isClient ? (isHydrating() ? DEFAULT_STATE : window.innerWidth <= 600) : DEFAULT_STATE);
   
     const update = () => {
       isPhone.value = window.innerWidth <= 600;
     };
     onMounted(() => {
       update();
       window.addEventListener('resize', update);
     });
   
     onUnmounted(() => {
       window.removeEventListener('resize', update);
     });
   };

[skirtles-code]

As far as I'm aware, there isn't currently a function you can use for this.

#1723 and #2016 discuss adding support for this in the Options API. In this comment, #2016 (comment), Evan suggests adding isHydrating(), but as far as I'm aware that hasn't actually happened.

In my opinion, this would be a really useful feature, and the addition of lazy hydration strategies in 3.5 made it even more tricky to workaround the problem effectively.