fix: better handling of visibility prop changes

Author: fakundo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transitioning",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React components for easily implementing basic CSS animations and transitions",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/Transition.tsx

@@ -138,18 +138,16 @@ export function Transition(props: TransitionProps) {
     addEndListener,
   } = props;
 
-  let ignoreInPropChange = false;
-
   // Make phase state
   const [phase, setPhase] = useState(() => {
-    ignoreInPropChange = true;
-    if (!inProp) {
-      return TransitionPhase.EXIT_DONE;
-    }
-    if (appear) {
-      return TransitionPhase.APPEAR;
+    switch (true) {
+      case !inProp:
+        return TransitionPhase.EXIT_DONE;
+      case !!appear:
+        return TransitionPhase.APPEAR;
+      default:
+        return TransitionPhase.APPEAR_DONE;
     }
-    return TransitionPhase.APPEAR_DONE;
   });
 
   // Effect for phase change
@@ -177,14 +175,18 @@ export function Transition(props: TransitionProps) {
     };
   }, [phase, duration]);
 
-  // Effect for initial phase
+  // Effect for handling `in` prop changes
   useIsoEffect(() => {
-    if (!ignoreInPropChange) {
-      if (inProp) {
-        setPhase(enter ? TransitionPhase.ENTER : TransitionPhase.ENTER_DONE);
-      } else {
-        setPhase(exit ? TransitionPhase.EXIT : TransitionPhase.EXIT_DONE);
-      }
+    const isExitPhase = [
+      TransitionPhase.EXIT,
+      TransitionPhase.EXIT_ACTIVE,
+      TransitionPhase.EXIT_DONE,
+    ].includes(phase);
+    if (inProp && isExitPhase) {
+      setPhase(enter ? TransitionPhase.ENTER : TransitionPhase.ENTER_DONE);
+    }
+    if (!inProp && !isExitPhase) {
+      setPhase(exit ? TransitionPhase.EXIT : TransitionPhase.EXIT_DONE);
     }
   }, [inProp]);
 

src/TransitionGroup.tsx

@@ -1,4 +1,5 @@
 import { Children, cloneElement, useRef, isValidElement } from 'react';
+import { useIsoEffect } from './useIsoEffect';
 
 export type TransitionGroupProps = {
   children: React.ReactNode;
@@ -49,7 +50,7 @@ type VisibleElement = {
 export function TransitionGroup(props: TransitionGroupProps) {
   const { children, appear = false, enter = true, exit = false, duration = 500 } = props;
 
-  const firstRenderRef = useRef(true);
+  const mountedRef = useRef(false);
   const prevVisibleElementsRef = useRef<VisibleElement[]>([]);
   const nextVisibleElements: VisibleElement[] = [];
   const nextElements: React.ReactElement[] = [];
@@ -71,9 +72,9 @@ export function TransitionGroup(props: TransitionGroupProps) {
     const elementClone = cloneElement(element, {
       in: !removeTimeout,
       enter: false,
-      appear: firstRenderRef.current ? (element.props.appear ?? appear) : (element.props.enter ?? enter),
       exit: element.props.exit ?? exit,
       duration: element.props.duration ?? duration,
+      appear: mountedRef.current ? (element.props.enter ?? enter) : (element.props.appear ?? appear),
     });
 
     nextVisibleElements.push({ element, removeTimeout });
@@ -128,8 +129,13 @@ export function TransitionGroup(props: TransitionGroupProps) {
     addVisibleElement(derivedElements[i]);
   }
 
+  // Mark as mounted
+  useIsoEffect(() => {
+    mountedRef.current = true;
+  }, []);
+
   // Save the visible elements
   prevVisibleElementsRef.current = nextVisibleElements;
-  firstRenderRef.current = false;
+
   return nextElements;
 }