diff --git a/src/__tests__/native/batch.test.tsx b/src/__tests__/native/batch.test.tsx
new file mode 100644
index 00000000..2cb6c876
--- /dev/null
+++ b/src/__tests__/native/batch.test.tsx
@@ -0,0 +1,93 @@
+import { Dimensions } from "react-native";
+
+import { act, render, screen } from "@testing-library/react-native";
+import { View } from "react-native-css/components/View";
+import { registerCSS } from "react-native-css/jest";
+
+import { batch, observable, type Effect } from "../../native/reactivity";
+
+jest.mock("react-native", () => {
+  const RN = jest.requireActual("react-native");
+  RN.Platform.OS = "ios";
+  return RN as unknown;
+});
+
+const rotate = (width: number) => {
+  act(() => {
+    const metrics = { width, height: 800, scale: 2, fontScale: 1 };
+    Dimensions.set({ window: metrics, screen: metrics });
+  });
+};
+
+const effectRecording = (record: () => void): Effect => ({
+  observers: new Set(),
+  run: record,
+});
+
+test.each([
+  ["before", ".a { width: 10vw; color: var(--c); }"],
+  ["after", ".a { color: var(--c); width: 10vw; }"],
+])(
+  "a rotation reaches an element reading a viewport unit %s a shared width-dependent variable",
+  (_, rule) => {
+    registerCSS(`
+      :root { --c: blue; }
+      @media (min-width: 500px) { :root { --c: red; } }
+      ${rule}
+      .b { color: var(--c); }
+    `);
+    rotate(300);
+    render(
+      <>
+        <View testID="a" className="a" />
+        <View testID="b" className="b" />
+      </>,
+    );
+
+    for (const [width, color] of [
+      [700, "red"],
+      [300, "blue"],
+      [700, "red"],
+    ] as const) {
+      rotate(width);
+      expect(screen.getByTestId("a")).toHaveStyle({ width: width / 10, color });
+      expect(screen.getByTestId("b")).toHaveStyle({ color });
+    }
+  },
+);
+
+test("an effect notified again while the batch drains runs again", () => {
+  const source = observable(1);
+  const derived = observable((read) => read(source) * 10);
+  const seen: string[] = [];
+  const subscriber = effectRecording(() => {
+    seen.push(`${source.get()},${derived.get()}`);
+  });
+
+  source.get(subscriber);
+  derived.get(subscriber);
+  batch(() => {
+    source.set(2);
+  });
+
+  expect(seen.at(-1)).toBe("2,20");
+});
+
+test("a batch defers every notification until its update returns, and runs each effect once", () => {
+  const width = observable(1);
+  const height = observable(1);
+  let runs = 0;
+  const subscriber = effectRecording(() => {
+    runs += 1;
+  });
+
+  width.get(subscriber);
+  height.get(subscriber);
+  batch(() => {
+    width.set(2);
+    height.set(2);
+    expect(runs).toBe(0);
+  });
+
+  expect(runs).toBe(1);
+});
diff --git a/src/__tests__/native/config-identity.test.ts b/src/__tests__/native/config-identity.test.ts
new file mode 100644
index 00000000..5edbaf66
--- /dev/null
+++ b/src/__tests__/native/config-identity.test.ts
@@ -0,0 +1,90 @@
+import { ScrollView as RNScrollView, View as RNView } from "react-native";
+
+import { generateStateHash } from "../../native/react/rules";
+import {
+  mappingToConfig,
+  type ComponentState,
+  type Config,
+} from "../../native/react/useNativeCss";
+import {
+  VAR_SYMBOL,
+  type Effect,
+  type VariableContextValue,
+} from "../../native/reactivity";
+import type { StyledConfiguration } from "../../runtime.types";
+
+const ruleFor = (): WeakKey => ({});
+
+const stateFor = (configs: Config[]): ComponentState => {
+  const ruleEffect: Effect = { observers: new Set(), run: () => undefined };
+  const inheritedVariables: VariableContextValue = { [VAR_SYMBOL]: true };
+
+  return {
+    configs,
+    inheritedContainers: {},
+    inheritedVariables,
+    ruleEffect,
+    ruleEffectGetter: (observable) => observable.get(ruleEffect),
+    styleEffect: { observers: new Set(), run: () => undefined },
+  };
+};
+
+const viewMapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNView>;
+
+const scrollViewMapping = {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+} satisfies StyledConfiguration<typeof RNScrollView>;
+
+test("two consumers of one mapping share a cache key", () => {
+  const rules = [ruleFor()];
+
+  const first = generateStateHash(
+    stateFor(mappingToConfig(viewMapping)),
+    rules,
+  );
+  const second = generateStateHash(
+    stateFor(mappingToConfig(viewMapping)),
+    rules,
+  );
+
+  expect(first).toBe(second);
+});
+
+test("mappings that differ keep different cache keys", () => {
+  const rules = [ruleFor()];
+
+  const view = generateStateHash(stateFor(mappingToConfig(viewMapping)), rules);
+  const scrollView = generateStateHash(
+    stateFor(mappingToConfig(scrollViewMapping)),
+    rules,
+  );
+
+  expect(view).not.toBe(scrollView);
+});
+
+test("a mapping that is not an object is refused by name", () => {
+  expect(() => mappingToConfig("style" as never)).toThrow(
+    /mapping must be an object/u,
+  );
+  expect(() => mappingToConfig(undefined as never)).toThrow(
+    /mapping must be an object/u,
+  );
+});
+
+test("a mapping mutated after its first use is not re-derived", () => {
+  const mapping: Record<string, string> = { className: "style" };
+  const first = mappingToConfig(mapping);
+
+  mapping.className = "contentContainerStyle";
+
+  expect(mappingToConfig(mapping)).toBe(first);
+});
+
+test("a mapping built per call still produces an equal config", () => {
+  expect(mappingToConfig({ className: "style" })).toEqual(
+    mappingToConfig(viewMapping),
+  );
+});
diff --git a/src/__tests__/native/reactivity-dependencies.test.tsx b/src/__tests__/native/reactivity-dependencies.test.tsx
index 52d4cd3b..f008cbd2 100644
--- a/src/__tests__/native/reactivity-dependencies.test.tsx
+++ b/src/__tests__/native/reactivity-dependencies.test.tsx
@@ -104,3 +104,35 @@ test("an explicit computed argument replaces its previous dependency", () => {
   cleanupEffect(subscriber);
   expect(second.observers.size).toBe(0);
 });
+
+test("an observed computed value runs once per change, not once per read", () => {
+  const source = observable(1);
+  let computed = 0;
+  const value = observable<number>((get) => {
+    computed += 1;
+    return get(source) * 2;
+  });
+  const subscriber: Effect = { observers: new Set(), run: jest.fn() };
+
+  for (let read = 0; read < 20; read += 1) {
+    expect(value.get(subscriber)).toBe(2);
+  }
+  expect(computed).toBe(1);
+
+  source.set(5);
+  expect(value.get(subscriber)).toBe(10);
+  expect(computed).toBe(2);
+});
+
+test("a family deletes a key by value only while the key still maps to it", () => {
+  const cached = family((key: string) => ({ key }));
+  const original = cached("shared");
+  cached.delete("shared");
+  const replacement = cached("shared");
+
+  expect(cached.deleteIf("shared", original)).toBe(false);
+  expect(cached("shared")).toBe(replacement);
+
+  expect(cached.deleteIf("shared", replacement)).toBe(true);
+  expect(cached.size()).toBe(0);
+});
diff --git a/src/__tests__/native/state-hash.test.ts b/src/__tests__/native/state-hash.test.ts
new file mode 100644
index 00000000..959449f1
--- /dev/null
+++ b/src/__tests__/native/state-hash.test.ts
@@ -0,0 +1,50 @@
+import { generateHash } from "../../native/react/rules";
+
+const keysOf = (count: number): WeakKey[] =>
+  Array.from({ length: count }, () => ({}));
+
+test("distinct key sets never share a hash", () => {
+  const keys = keysOf(60);
+  const owner = new Map<string, string>();
+
+  for (const [leftIndex, left] of keys.entries()) {
+    for (const [offset, right] of keys.slice(leftIndex + 1).entries()) {
+      const signature = `${String(leftIndex)}+${String(leftIndex + 1 + offset)}`;
+      const hash = generateHash([left, right]);
+      const prior = owner.get(hash);
+
+      expect(prior ?? signature).toBe(signature);
+      owner.set(hash, signature);
+    }
+  }
+
+  expect(owner.size).toBe((keys.length * (keys.length - 1)) / 2);
+});
+
+test("a key set hashes the same however it is ordered", () => {
+  const first: WeakKey = {};
+  const second: WeakKey = {};
+  const third: WeakKey = {};
+
+  expect(generateHash([first, second, third])).toBe(
+    generateHash([third, first, second]),
+  );
+});
+
+test("a key outside WeakKey is refused rather than erased", () => {
+  const key: WeakKey = {};
+
+  expect(() => generateHash([key, undefined as unknown as WeakKey])).toThrow();
+});
+
+test("hashing the same key twice answers the same value", () => {
+  const only: WeakKey = {};
+
+  expect(generateHash([only])).toBe(generateHash([only]));
+});
+
+test("the encoding is integers, not floats or exponents", () => {
+  const keys: WeakKey[] = [{}, {}, {}];
+
+  expect(generateHash(keys)).toMatch(/^\d+(?:,\d+)*$/u);
+});
diff --git a/src/__tests__/native/style-cache.test.tsx b/src/__tests__/native/style-cache.test.tsx
new file mode 100644
index 00000000..d4f8919c
--- /dev/null
+++ b/src/__tests__/native/style-cache.test.tsx
@@ -0,0 +1,390 @@
+import { Activity, StrictMode, type ReactNode } from "react";
+import { Button as RNButton, type ButtonProps } from "react-native";
+
+import { act, render, screen } from "@testing-library/react-native";
+import { VariableContextProvider } from "react-native-css";
+import { copyComponentProperties } from "react-native-css/components/copyComponentProperties";
+import { Text } from "react-native-css/components/Text";
+import { View } from "react-native-css/components/View";
+import { registerCSS } from "react-native-css/jest";
+import { useCssElement } from "react-native-css/native";
+import type {
+  StyledConfiguration,
+  StyledProps,
+} from "react-native-css/runtime.types";
+
+import { mappingToConfig } from "../../native/react/useNativeCss";
+import { colorScheme, dimensions, type Effect } from "../../native/reactivity";
+import { stylesFamily } from "../../native/styles";
+
+const buttonMapping: StyledConfiguration<typeof RNButton> = {
+  className: { target: false, nativeStyleMapping: { color: "color" } },
+};
+
+const Button = copyComponentProperties(
+  RNButton,
+  (props: StyledProps<ButtonProps, typeof buttonMapping>) =>
+    useCssElement(RNButton, props, buttonMapping),
+);
+
+const titleColor = (title: string): unknown =>
+  screen.getByText(title).props.style?.[1]?.color;
+
+const withFreshVariables = (className: string, name: string) => (
+  <VariableContextProvider value={{ [name]: "red" }}>
+    <View className={className} />
+  </VariableContextProvider>
+);
+
+test("identical elements share one resolved-style cache entry", () => {
+  registerCSS(`.probe { color: red; width: 10px; }`);
+  stylesFamily.clear();
+
+  render(
+    <>
+      {Array.from({ length: 50 }, (_unused, index) => (
+        <View key={index} className="probe" />
+      ))}
+    </>,
+  );
+
+  expect(stylesFamily.size()).toBe(1);
+});
+
+test("elements with different class lists keep distinct entries", () => {
+  registerCSS(`.red { color: red; } .blue { color: blue; }`);
+  stylesFamily.clear();
+
+  render(
+    <>
+      <View className="red" />
+      <View className="blue" />
+    </>,
+  );
+
+  expect(stylesFamily.size()).toBe(2);
+});
+
+test("nothing writes to the config elements share", () => {
+  // Compared by value, since a write to a frozen config does not throw here
+  registerCSS(`.tinted { color: orange; }`);
+  const shared = mappingToConfig(buttonMapping);
+  const before = JSON.stringify(shared);
+
+  render(<Button className="tinted" title="Go" onPress={() => undefined} />);
+
+  expect(JSON.stringify(shared)).toBe(before);
+  expect(titleColor("Go")).toBe("#ffa500");
+});
+
+test("a shared entry is not consumed by the first element that reads it", () => {
+  registerCSS(`.tinted { color: orange; }`);
+  stylesFamily.clear();
+  const titles = ["a", "b", "c"];
+
+  render(
+    <>
+      {titles.map((title) => (
+        <Button
+          key={title}
+          className="tinted"
+          title={title}
+          onPress={() => undefined}
+        />
+      ))}
+    </>,
+  );
+
+  expect(stylesFamily.size()).toBe(1);
+  expect(titles.map(titleColor)).toStrictEqual([
+    "#ffa500",
+    "#ffa500",
+    "#ffa500",
+  ]);
+});
+
+test("re-rendering an element keeps the value its mapping took from the shared entry", () => {
+  registerCSS(`.drain-once { color: orange; }`);
+
+  const tree = render(
+    <Button className="drain-once" title="Go" onPress={() => undefined} />,
+  );
+  expect(titleColor("Go")).toBe("#ffa500");
+
+  for (let pass = 0; pass < 10; pass += 1) {
+    tree.rerender(
+      <Button className="drain-once" title="Go" onPress={() => undefined} />,
+    );
+    expect(titleColor("Go")).toBe("#ffa500");
+  }
+});
+
+test("the cache releases an entry when the last element using it unmounts", () => {
+  registerCSS(`.release-a { color: red; }`);
+  stylesFamily.clear();
+
+  const tree = render(<View className="release-a" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  tree.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test("an entry shared by two elements survives until both unmount", () => {
+  registerCSS(`.release-b { color: blue; }`);
+  stylesFamily.clear();
+
+  const first = render(<View className="release-b" />);
+  const second = render(<View className="release-b" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  first.unmount();
+  expect(stylesFamily.size()).toBe(1);
+
+  second.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test.each([
+  ["a viewport unit", `.reactive { width: 10vw; }`],
+  ["an undefined variable", `.reactive { color: var(--not-defined); }`],
+  [
+    "a dark-mode root variable",
+    `:root { --brand: red; }
+     @media (prefers-color-scheme: dark) { :root { --brand: blue; } }
+     .reactive { color: var(--brand); }`,
+  ],
+])("an entry reading %s is released on unmount", (_, css) => {
+  registerCSS(css);
+  stylesFamily.clear();
+
+  const tree = render(<View className="reactive" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  tree.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test("a viewport-unit entry stays reactive while mounted", () => {
+  registerCSS(`.reactive-live { width: 50vw; }`);
+  stylesFamily.clear();
+
+  const tree = render(<View testID="live" className="reactive-live" />);
+
+  act(() => {
+    dimensions.set({ ...dimensions.get(), width: 400 });
+  });
+
+  expect(tree.getByTestId("live").props.style).toStrictEqual({ width: 200 });
+  tree.unmount();
+});
+
+test("a root-variable change does not notify unrelated colorScheme subscribers", () => {
+  const css = (light: string) => `
+    :root { --amp: ${light}; }
+    @media (prefers-color-scheme: dark) { :root { --amp: blue; } }
+    .amp-user { color: var(--amp); }
+  `;
+  registerCSS(css("red"));
+  stylesFamily.clear();
+
+  const tree = render(<View testID="amp" className="amp-user" />);
+
+  let unrelatedRuns = 0;
+  const unrelated: Effect = {
+    observers: new Set(),
+    run: () => {
+      unrelatedRuns += 1;
+    },
+  };
+  colorScheme.get(unrelated);
+
+  act(() => {
+    registerCSS(css("green"));
+  });
+
+  expect(tree.getByTestId("amp")).toHaveStyle({ color: "green" });
+  expect(unrelatedRuns).toBe(0);
+  tree.unmount();
+});
+
+test("an animated viewport-unit class survives a dimension change", () => {
+  registerCSS(`
+    @keyframes spin { from { opacity: 0; } to { opacity: 1; } }
+    .cycle-boom { width: 50vw; animation: spin 1s; }
+  `);
+  stylesFamily.clear();
+
+  const tree = render(<View testID="boom" className="cycle-boom" />);
+
+  expect(() => {
+    act(() => {
+      dimensions.set({ ...dimensions.get(), width: 400 });
+    });
+  }).not.toThrow();
+
+  tree.unmount();
+});
+
+test("a superseded entry is released while the element stays mounted", () => {
+  registerCSS(`.release-c { color: var(--probe); }`);
+  stylesFamily.clear();
+
+  const tree = render(withFreshVariables("release-c", "--probe"));
+  for (let pass = 0; pass < 12; pass += 1) {
+    tree.rerender(withFreshVariables("release-c", "--probe"));
+  }
+
+  expect(stylesFamily.size()).toBe(1);
+
+  tree.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test("unmounting an element does not delete another element's live entry", () => {
+  registerCSS(`.shared-identity { color: red; }`);
+  stylesFamily.clear();
+
+  const first = render(<View className="shared-identity" />);
+  const second = render(<View className="shared-identity" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  first.unmount();
+  expect(stylesFamily.size()).toBe(1);
+
+  const third = render(<View className="shared-identity" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  second.unmount();
+  third.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test("a superseded element does not delete the entry it left behind", () => {
+  registerCSS(`.stale-a { color: red; } .stale-b { color: blue; }`);
+  stylesFamily.clear();
+
+  const first = render(<View className="stale-a" />);
+  first.rerender(<View className="stale-b" />);
+
+  const second = render(<View className="stale-a" />);
+  expect(stylesFamily.size()).toBe(2);
+
+  first.unmount();
+  expect(stylesFamily.size()).toBe(1);
+
+  second.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test("StrictMode's replayed effects keep one entry per class list", () => {
+  registerCSS(`.strict-shared { width: 10vw; }`);
+  stylesFamily.clear();
+
+  const strict = (element: ReactNode) => <StrictMode>{element}</StrictMode>;
+  const sizes: number[] = [];
+
+  const first = render(strict(<View className="strict-shared" />));
+  sizes.push(stylesFamily.size());
+  const second = render(strict(<View className="strict-shared" />));
+  sizes.push(stylesFamily.size());
+  first.unmount();
+  sizes.push(stylesFamily.size());
+  const third = render(strict(<View className="strict-shared" />));
+  sizes.push(stylesFamily.size());
+  second.unmount();
+  third.unmount();
+  sizes.push(stylesFamily.size());
+
+  expect(sizes).toStrictEqual([1, 1, 1, 1, 0]);
+});
+
+test("an element Activity hides and shows again keeps sharing its entry", () => {
+  registerCSS(`.activity-shared { width: 10vw; }`);
+  stylesFamily.clear();
+
+  const toggled = (mode: "hidden" | "visible") => (
+    <Activity mode={mode}>
+      <View className="activity-shared" />
+    </Activity>
+  );
+
+  const first = render(toggled("visible"));
+  first.rerender(toggled("hidden"));
+  first.rerender(toggled("visible"));
+  expect(stylesFamily.size()).toBe(1);
+
+  const second = render(<View className="activity-shared" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  first.unmount();
+  expect(stylesFamily.size()).toBe(1);
+
+  const third = render(<View className="activity-shared" />);
+  expect(stylesFamily.size()).toBe(1);
+
+  second.unmount();
+  third.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
+
+test("mounting and unmounting a tree repeatedly returns the cache to empty", () => {
+  registerCSS(`
+    .stress-a { color: red; }
+    .stress-b { color: blue; }
+    .stress-c { font-size: 12px; }
+  `);
+  stylesFamily.clear();
+
+  const peaks: number[] = [];
+
+  for (let cycle = 0; cycle < 25; cycle += 1) {
+    const tree = render(
+      <View className="stress-a">
+        <View className="stress-b">
+          <Text className="stress-c">deep</Text>
+        </View>
+        <View className="stress-b" />
+      </View>,
+    );
+    peaks.push(stylesFamily.size());
+    tree.unmount();
+
+    expect(stylesFamily.size()).toBe(0);
+  }
+
+  expect(peaks).toStrictEqual(Array.from({ length: 25 }, () => 3));
+});
+
+test("an entry shared across many siblings survives until the last one goes", () => {
+  registerCSS(`.stress-shared { color: green; }`);
+  stylesFamily.clear();
+
+  const trees = Array.from({ length: 30 }, () =>
+    render(<View className="stress-shared" />),
+  );
+  expect(stylesFamily.size()).toBe(1);
+
+  for (const [index, tree] of trees.entries()) {
+    tree.unmount();
+    expect(stylesFamily.size()).toBe(index === trees.length - 1 ? 0 : 1);
+  }
+});
+
+test("per-render key churn stays flat and drains completely", () => {
+  registerCSS(`.stress-churn { color: var(--churn); }`);
+  stylesFamily.clear();
+
+  const tree = render(withFreshVariables("stress-churn", "--churn"));
+
+  const sizes: number[] = [];
+  for (let pass = 0; pass < 50; pass += 1) {
+    tree.rerender(withFreshVariables("stress-churn", "--churn"));
+    sizes.push(stylesFamily.size());
+  }
+
+  expect(sizes).toStrictEqual(Array.from({ length: 50 }, () => 1));
+
+  tree.unmount();
+  expect(stylesFamily.size()).toBe(0);
+});
diff --git a/src/native-internal/style-collection.ts b/src/native-internal/style-collection.ts
index 21a296a6..c79b28e0 100644
--- a/src/native-internal/style-collection.ts
+++ b/src/native-internal/style-collection.ts
@@ -8,9 +8,9 @@ import type {
 
 import { DEFAULT_CONTAINER_NAME } from "../native/conditions/container-query";
 import {
+  batch,
   family,
   observable,
-  observableBatch,
   type Observable,
   type VariableContextValue,
 } from "../native/reactivity";
@@ -39,67 +39,61 @@ globalThis.__react_native_css_style_collection ??= {
     return observable([], isDeepEqual);
   }),
   inject: function (options: ReactNativeCssStyleSheet) {
-    observableBatch.current = new Set();
-
-    StyleCollection.styles("will-change-variable").set([
-      {
-        s: [0],
-        v: [],
-      },
-    ]);
-
-    StyleCollection.styles("will-change-container").set([
-      {
-        s: [0],
-        c: [DEFAULT_CONTAINER_NAME],
-      },
-    ]);
-
-    StyleCollection.styles("will-change-animation").set([
-      {
-        s: [0],
-        a: true,
-      },
-    ]);
-
-    StyleCollection.styles("will-change-pressable").set([
-      {
-        s: [0],
-        p: {
-          h: 1,
+    batch(() => {
+      StyleCollection.styles("will-change-variable").set([
+        {
+          s: [0],
+          v: [],
         },
-      },
-    ]);
+      ]);
 
-    if (options.s) {
-      for (const style of options.s) {
-        StyleCollection.styles(style[0]).set(style[1]);
-      }
-    }
+      StyleCollection.styles("will-change-container").set([
+        {
+          s: [0],
+          c: [DEFAULT_CONTAINER_NAME],
+        },
+      ]);
 
-    if (options.k) {
-      for (const keyframes of options.k) {
-        StyleCollection.keyframes(keyframes[0]).set(keyframes[1]);
-      }
-    }
+      StyleCollection.styles("will-change-animation").set([
+        {
+          s: [0],
+          a: true,
+        },
+      ]);
+
+      StyleCollection.styles("will-change-pressable").set([
+        {
+          s: [0],
+          p: {
+            h: 1,
+          },
+        },
+      ]);
 
-    if (options.vr) {
-      for (const entry of options.vr) {
-        rootVariables(entry[0]).set(entry[1]);
+      if (options.s) {
+        for (const style of options.s) {
+          StyleCollection.styles(style[0]).set(style[1]);
+        }
       }
-    }
 
-    if (options.vu) {
-      for (const entry of options.vu) {
-        universalVariables(entry[0]).set(entry[1]);
+      if (options.k) {
+        for (const keyframes of options.k) {
+          StyleCollection.keyframes(keyframes[0]).set(keyframes[1]);
+        }
       }
-    }
 
-    for (const effect of observableBatch.current) {
-      effect.run();
-    }
+      if (options.vr) {
+        for (const entry of options.vr) {
+          rootVariables(entry[0]).set(entry[1]);
+        }
+      }
 
-    observableBatch.current = undefined;
+      if (options.vu) {
+        for (const entry of options.vu) {
+          universalVariables(entry[0]).set(entry[1]);
+        }
+      }
+    });
   },
 };
 
diff --git a/src/native/react/rules.ts b/src/native/react/rules.ts
index e0fe8d1a..cdd859c0 100644
--- a/src/native/react/rules.ts
+++ b/src/native/react/rules.ts
@@ -297,48 +297,24 @@ const hashKeyFamily = weakFamily(() => hashKeyCount++);
 
 export function generateStateHash(
   state: ComponentState,
-  iterableKeys?: Iterable<WeakKey>,
-  variables?: WeakKey,
-  inlineVars?: Set<WeakKey>,
+  iterableKeys: Iterable<WeakKey>,
 ): string {
-  if (!iterableKeys) {
-    return "";
-  }
-
-  const keys = [state.configs, ...iterableKeys];
-
-  if (variables) {
-    keys.push(variables);
-  }
-
-  if (inlineVars) {
-    keys.push(...inlineVars);
-  }
-
-  return generateHash(keys);
+  return generateHash([state.configs, ...iterableKeys]);
 }
 
-/**
- * Quickly generate a unique hash for a set of numbers.
- * This is not a cryptographic hash, but it is fast and has a low chance of collision.
- */
-const MOD = 9007199254740871; // Largest prime within safe integer range 2^53
-const PRIME = 31; // A smaller prime for mixing
+// An exact encoding rather than a digest, since a collision would hand one element another element's styles
 export function generateHash(keys: WeakKey[]): string {
-  let hash = 0;
-  let product = 1; // Used for mixing to enhance uniqueness
+  // A typed array sorts numerically without a comparator, and Float64 holds the unbounded key counter where Int32 wraps
+  const numbers = new Float64Array(keys.length);
+  let index = 0;
 
   for (const key of keys) {
-    if (!key) continue; // Skip if key is undefined
-
-    const num = hashKeyFamily(key);
-    hash = (hash ^ num) % MOD; // XOR and modular arithmetic
-    product = (product * (num + PRIME)) % MOD; // Mix with multiplication
+    numbers[index] = hashKeyFamily(key);
+    index += 1;
   }
 
-  // Combine hash and product to form the final hash
-  hash = (hash + product) % MOD;
+  // Sorted, so a key set encodes the same in any order
+  numbers.sort();
 
-  // Return the hash as a string
-  return hash.toString(36);
+  return numbers.join(",");
 }
diff --git a/src/native/react/useNativeCss.ts b/src/native/react/useNativeCss.ts
index f38c77c2..6f265d49 100644
--- a/src/native/react/useNativeCss.ts
+++ b/src/native/react/useNativeCss.ts
@@ -16,6 +16,7 @@ import { testGuards, type RenderGuard } from "../conditions/guards";
 import {
   cleanupEffect,
   ContainerContext,
+  weakFamily,
   type ContainerContextValue,
   type Effect,
   type Getter,
@@ -190,10 +191,10 @@ export function useNativeCss(
   return createElement(type, props);
 }
 
-/**
- * Convert the styled() mapping to a config array
- */
-export function mappingToConfig(mapping: StyledConfiguration<any>) {
+// Derived once per mapping, since the resolved-style cache keys on the config array's identity
+const configForMapping = weakFamily(function (
+  mapping: StyledConfiguration<any>,
+): Config[] {
   return Object.entries(mapping).flatMap(([key, value]): Config => {
     if (value === true) {
       return {
@@ -237,6 +238,17 @@ export function mappingToConfig(mapping: StyledConfiguration<any>) {
 
     throw new Error(`styled(): Invalid mapping for ${key}: ${value}`);
   });
+});
+
+// Refused by name, since a primitive would otherwise fail inside the WeakMap with a message naming neither styled() nor the argument
+export function mappingToConfig(mapping: StyledConfiguration<any>): Config[] {
+  if (typeof mapping !== "object" || mapping === null) {
+    throw new Error(
+      `styled(): mapping must be an object, received ${mapping === null ? "null" : typeof mapping}`,
+    );
+  }
+
+  return configForMapping(mapping);
 }
 
 // Apply native Image fitting before normal, inline, and important props merge.
diff --git a/src/native/reactivity.ts b/src/native/reactivity.ts
index 296988a6..50628639 100644
--- a/src/native/reactivity.ts
+++ b/src/native/reactivity.ts
@@ -137,6 +137,20 @@ export function cleanupEffect(effect: Effect) {
   }
 }
 
+export function batch(update: () => void) {
+  const notified = new Set<Effect>();
+  observableBatch.current = notified;
+  update();
+
+  // Deleted before it runs, so an effect notified again during the drain is re-added and runs again
+  for (const effect of notified) {
+    notified.delete(effect);
+    effect.run();
+  }
+
+  observableBatch.current = undefined;
+}
+
 /** Family Helpers ************************************************************/
 
 export function family<Key, Result = Key, Args extends any = void>(
@@ -154,6 +168,12 @@ export function family<Key, Result = Key, Args extends any = void>(
       delete(key: Key) {
         return map.delete(key);
       },
+      deleteIf(key: Key, value: Result) {
+        return map.get(key) === value && map.delete(key);
+      },
+      size() {
+        return map.size;
+      },
       clear() {
         return map.clear();
       },
@@ -215,15 +235,10 @@ export const vh = observable<number>(
 );
 
 Dimensions.addEventListener("change", ({ window }) => {
-  observableBatch.current = new Set();
-  vw.set(window.width);
-  vh.set(window.height);
-
-  for (const effect of observableBatch.current) {
-    effect.run();
-  }
-
-  observableBatch.current = undefined;
+  batch(() => {
+    vw.set(window.width);
+    vh.set(window.height);
+  });
 });
 
 /** Color Scheme **************************************************************/
diff --git a/src/native/styles/index.ts b/src/native/styles/index.ts
index 6be03daa..e9be5fdb 100644
--- a/src/native/styles/index.ts
+++ b/src/native/styles/index.ts
@@ -169,15 +169,13 @@ export const stylesFamily = family(
 
     const obs = observable((read) => calculateProps(read, sortedRules));
 
-    /**
-     * A family is a map, so we need to cleanup the observers when the the hash is no longer used
-     */
     const unsubscribe = obs.unsubscribe;
     return Object.assign(obs, {
       unsubscribe: (effect: Effect) => {
         unsubscribe(effect);
         if (obs.observers.size === 0) {
-          stylesFamily.delete(hash);
+          // By identity, since a released entry's hash may already map to the entry that replaced it
+          stylesFamily.deleteIf(hash, obs);
         }
       },
     });