Merge pull request #55 from reg-viz/feat/improve-performance

refactor: avoid unnecessary renders
reg-viz · Apr 21, 2024 · a1a70d9 · a1a70d9
2 parents ce8cc6d + 4f77b80
commit a1a70d9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/src/components/internal/Collapse/Collapse.css.ts b/src/components/internal/Collapse/Collapse.css.ts
@@ -13,9 +13,6 @@ export const wrapper = style({
       height: 0,
       transitionDuration: 'var(--collapse-duration-enter)',
     },
-    '&.collapse-enter-active': {
-      transitionDuration: 'var(--collapse-duration-enter)',
-    },
     '&.collapse-exit': {
       overflow: 'auto',
       height: 'auto',

diff --git a/src/components/internal/Collapse/Collapse.tsx b/src/components/internal/Collapse/Collapse.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import * as styles from './Collapse.css';
 
 export type Props = Omit<
@@ -17,12 +17,10 @@ export const Collapse = ({ open, duration, children, ...rest }: Props) => {
     const { current: body } = bodyRef;
 
     node.style.height = `${body != null ? body.clientHeight : 0}px`;
-    node.style.overflow = 'hidden';
   }, []);
 
   const clearInlineStyles = useCallback((node: HTMLElement) => {
     node.style.height = '';
-    node.style.overflow = '';
   }, []);
 
   const handleEnter = useCallback(
@@ -54,30 +52,34 @@ export const Collapse = ({ open, duration, children, ...rest }: Props) => {
   );
 
   return (
-    <CSSTransition
-      classNames="collapse"
-      in={open}
-      timeout={duration}
-      onEnter={handleEnter}
-      onEntered={handleEntered}
-      onExit={handleExit}
-      onExiting={handleExiting}
-    >
-      <div
-        {...rest}
-        className={styles.wrapper}
-        style={
-          {
-            '--collapse-duration-enter': `${duration.enter}ms`,
-            '--collapse-duration-exit': `${duration.exit}ms`,
-          } as React.CSSProperties
-        }
-        aria-hidden={open ? 'false' : 'true'}
-      >
-        <div className={styles.inner} ref={bodyRef}>
-          <div className={styles.innerBox}>{children}</div>
-        </div>
-      </div>
-    </CSSTransition>
+    <TransitionGroup>
+      {open && (
+        <CSSTransition
+          key="collapse"
+          in={open}
+          classNames="collapse"
+          timeout={duration}
+          onEnter={handleEnter}
+          onEntered={handleEntered}
+          onExit={handleExit}
+          onExiting={handleExiting}
+        >
+          <div
+            {...rest}
+            className={styles.wrapper}
+            style={
+              {
+                '--collapse-duration-enter': `${duration.enter}ms`,
+                '--collapse-duration-exit': `${duration.exit}ms`,
+              } as React.CSSProperties
+            }
+          >
+            <div className={styles.inner} ref={bodyRef}>
+              <div className={styles.innerBox}>{children}</div>
+            </div>
+          </div>
+        </CSSTransition>
+      )}
+    </TransitionGroup>
   );
 };