fix: fast refresh crashing app

Author: marklawlor

cpp/StyledComputedFactory.cpp

@@ -28,8 +28,13 @@ namespace margelo::nitro::cssnitro {
             const std::string &variableScope,
             const std::string &containerScope,
             const std::vector<std::string> &validAttributeQueries) {
+
+        // Capture rerender by value (copy) so it persists through fast refresh
+        // Capture shadowUpdates by pointer since it's a stable singleton
+        auto shadowUpdatesPtr = &shadowUpdates;
+
         auto computed = reactnativecss::Computed<Styled *>::create(
-                [&styleRuleMap, classNames, componentId, &rerender, &shadowUpdates, variableScope, containerScope, validAttributeQueries](
+                [&styleRuleMap, classNames, componentId, rerender, shadowUpdatesPtr, variableScope, containerScope, validAttributeQueries](
                         Styled *const &prev,
                         typename reactnativecss::Effect::GetProxy &get) {
                     Styled *next = new Styled{};
@@ -113,17 +118,26 @@ namespace margelo::nitro::cssnitro {
                                 mergedImportantProps, false);
                     }
 
+                    // Only perform these actions if this is a recompute (prev exists)
                     if (prev != nullptr) {
-                        delete prev;
-
+                        // Check if we should rerender before deleting prev
                         if (shouldRerender(*next)) {
                             (void) rerender();
                         }
 
-                        if (next->style.has_value()) {
-                            // Notify ShadowTreeUpdateManager with the resolved style
-                            shadowUpdates.addUpdates(componentId, next->style.value());
-                        }
+                        // Notify ShadowTreeUpdateManager of style changes in a batch
+                        reactnativecss::Effect::batch([&]() {
+                            if (next->style.has_value()) {
+                                shadowUpdatesPtr->addUpdates(componentId, next->style.value());
+                            }
+                            if (next->importantStyle.has_value()) {
+                                shadowUpdatesPtr->addUpdates(componentId,
+                                                             next->importantStyle.value());
+                            }
+                        });
+
+                        // Now safe to delete prev
+                        delete prev;
                     }
 
                     return next;

example/src/App.tsx

@@ -25,7 +25,7 @@ StyleRegistry.addStyleSheet({
               // transitionDuration: "5s",
             },
             {
-              selectionColor: "blue",
+              selectionColor: "orange",
             },
           ],
         },
@@ -48,7 +48,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Text className="text-red-500" style={{ fontSize: 30 }} selectable>
-        Multiply17: {multiply(3, 7)}
+        Multiply28: {multiply(3, 7)}
       </Text>
     </View>
   );

src/components/Text/Text.native.tsx

@@ -3,9 +3,11 @@ import { Text as RNText } from "react-native";
 
 import { createAnimatedComponent } from "react-native-reanimated";
 
+import { useElement } from "../../native/useElement";
+import { useDualRefs } from "../../native/useRef";
 import { useStyledProps } from "../../native/useStyled";
-// import { useDualRefs } from "../../native/useRef";
-import { copyComponentProperties } from "../../utils";
+import { StyleRegistry } from "../../specs/StyleRegistry";
+import { copyComponentProperties, getDeepKeys } from "../../utils";
 
 const AnimatedText = createAnimatedComponent(RNText);
 
@@ -15,28 +17,25 @@ export const Text = copyComponentProperties(
     const componentId = useId();
     const styled = useStyledProps(componentId, p.className, p);
 
-    // // const ref = useDualRefs(componentId, p.ref);
-
-    // if (p.style) {
-    //   StyleRegistry.updateComponentInlineStyleKeys(
-    //     componentId,
-    //     getDeepKeys(p.style),
-    //   );
-    // }
-
-    // return useElement(AnimatedText, styled, {
-    //   ...styled.props,
-    //   ...p,
-    //   ...styled.importantProps,
-    //   // ref,
-    //   style:
-    //     styled.style || styled.importantStyle
-    //       ? [styled.style, p.style, styled.importantStyle]
-    //       : p.style,
-    // });
-    console.log("render", styled);
-
-    return <AnimatedText {...p} />;
+    const ref = useDualRefs(componentId, p.ref);
+
+    if (p.style) {
+      StyleRegistry.updateComponentInlineStyleKeys(
+        componentId,
+        getDeepKeys(p.style),
+      );
+    }
+
+    return useElement(AnimatedText, styled, {
+      ...styled.props,
+      ...p,
+      ...styled.importantProps,
+      ref,
+      style:
+        styled.style || styled.importantStyle
+          ? [styled.style, p.style, styled.importantStyle]
+          : p.style,
+    });
   },
 );