@toggld/react 0.1.0 → 0.2.0

package/README.md

@@ -45,7 +45,7 @@ A component re-renders only when **its** flag's result changes.
 ## Server-side rendering
 
 Create the client in the root component with `useState(() => new ToggldClient({
-…, bootstrap }))`, where `bootstrap` is `@toggld/node`'s `evaluateAll(context)`
+…, bootstrap }))`, where `bootstrap` is `@toggld/js`'s `evaluateAll(context)`
 from the server. Server output and hydration match, and the browser sends no
 first request.
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, createElement, useContext, useRef, useSyncExternalStore } from "react";
+import { createContext, createElement, useContext, useEffect, useRef, useSyncExternalStore } from "react";
 import { ToggldClient } from "@toggld/browser";
 // src/index.ts
 /**
@@ -30,6 +30,9 @@ import { ToggldClient } from "@toggld/browser";
 * that did not change by identity, and the hooks compare by identity. Built on
 * `useSyncExternalStore`, so server rendering and hydration work when the
 * client is created with a `bootstrap`.
+*
+* For Analytics, a hook counts one read when its component mounts with a
+* value, and one more each time its result changes, not one per render.
 */
 const ClientContext = createContext(null);
 ClientContext.displayName = "ToggldClient";
@@ -57,6 +60,8 @@ function useToggldStatus() {
 	const getStatus = () => client.getSnapshot().status;
 	return useSyncExternalStore(client.subscribe, getStatus, getStatus);
 }
+const INTERNAL = Symbol.for("toggld.browser.internal");
+const internalOf = (client) => client[INTERNAL];
 /** Evaluate with the getter that matches the default value's type. */
 const evaluateTyped = (client, key, defaultValue) => {
 	switch (typeof defaultValue) {
@@ -79,14 +84,22 @@ const sameMetadata = (a, b) => {
 const sameDetails = (a, b) => a === b || a.flagKey === b.flagKey && Object.is(a.value, b.value) && a.variant === b.variant && a.reason === b.reason && a.errorCode === b.errorCode && a.errorMessage === b.errorMessage && sameMetadata(a.flagMetadata, b.flagMetadata);
 function useFlagDetails(key, defaultValue) {
 	const client = useToggldClient();
+	const internal = internalOf(client);
 	const cache = useRef(null);
+	const counted = useRef(null);
 	const get = () => {
-		const details = evaluateTyped(client, key, defaultValue);
+		const details = internal?.peek(key, defaultValue) ?? evaluateTyped(client, key, defaultValue);
 		if (cache.current !== null && sameDetails(cache.current, details)) return cache.current;
 		cache.current = details;
 		return details;
 	};
-	return useSyncExternalStore(client.subscribe, get, get);
+	const details = useSyncExternalStore(client.subscribe, get, get);
+	useEffect(() => {
+		if (counted.current === details) return;
+		counted.current = details;
+		internal?.record(details);
+	}, [details, internal]);
+	return details;
 }
 function useFlag(key, defaultValue) {
 	return useFlagDetails(key, defaultValue).value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toggld/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React bindings for the Toggld browser SDK — a provider and hooks that re-render only when a flag's value changes. Server-rendering friendly.",
   "license": "Apache-2.0",
   "homepage": "https://toggld.io",
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "@toggld/browser": "^0.1.0"
+    "@toggld/browser": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.3.0",
@@ -46,7 +46,7 @@
     "react-dom": "^19.3.1",
     "tsdown": "^0.23.2",
     "typescript": "6.0.3",
-    "@toggld/browser": "0.1.0"
+    "@toggld/browser": "0.2.0"
   },
   "scripts": {
     "build": "tsdown",