From 1da40fe5c1b763cf59d3749e5c483461099bfc67 Mon Sep 17 00:00:00 2001
From: kongmoumou <35442047+kongmoumou@users.noreply.github.com>
Date: Tue, 28 Feb 2023 11:47:48 +0800
Subject: [PATCH] perf: avoid force reflow in use-size (#2068)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: avoid force reflow in use-size

* fix: update size init logic

* docs: there is no need comment for simple logic

---------

Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: 云泥 <1656081615@qq.com>
---
 packages/hooks/src/useSize/index.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/hooks/src/useSize/index.ts b/packages/hooks/src/useSize/index.ts
index 31a4d6ad5d..20a3de66a5 100644
--- a/packages/hooks/src/useSize/index.ts
+++ b/packages/hooks/src/useSize/index.ts
@@ -7,14 +7,16 @@ import useIsomorphicLayoutEffectWithTarget from '../utils/useIsomorphicLayoutEff
 type Size = { width: number; height: number };
 
 function useSize(target: BasicTarget): Size | undefined {
-  let el = getTargetElement(target);
   const [state, setState] = useRafState<Size | undefined>(
-    el ? { width: el.clientWidth, height: el.clientHeight } : undefined,
+    () => {
+      const el = getTargetElement(target);
+      return el ? { width: el.clientWidth, height: el.clientHeight } : undefined
+    },
   );
 
   useIsomorphicLayoutEffectWithTarget(
     () => {
-      el = getTargetElement(target);
+      const el = getTargetElement(target);
 
       if (!el) {
         return;