@unhead/react 2.0.2 → 2.0.4

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useState, useRef } from 'react';
+import React, { useEffect, useContext, useState, useMemo, useCallback, useRef } from 'react';
 import { ValidHeadTags, TagsWithInnerContent, HasElementTags } from 'unhead/utils';
 import { useScript as useScript$1, useHead as useHead$1, useHeadSafe as useHeadSafe$1, useSeoMeta as useSeoMeta$1 } from 'unhead';
 import { U as UnheadContext } from './shared/react.DF9T1fqs.mjs';
@@ -97,44 +97,51 @@ function useScript(_input, _options) {
 }
 
 const Head = ({ children, titleTemplate }) => {
-  const headRef = useRef(null);
   const head = useUnhead();
-  useEffect(() => {
-    return () => {
-      if (headRef.current?.dispose()) {
-        headRef.current.dispose();
-      }
-      headRef.current = null;
-    };
-  }, []);
-  useEffect(() => {
+  const processedElements = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
+  const getHeadChanges = useCallback(() => {
     const input = {
       titleTemplate
     };
-    const elements = React.Children.toArray(children).filter(React.isValidElement);
-    elements.forEach((element) => {
-      const { type, props } = element;
-      if (!ValidHeadTags.has(type)) {
-        return;
+    for (const element of processedElements) {
+      const reactElement = element;
+      const { type, props } = reactElement;
+      const tagName = String(type);
+      if (!ValidHeadTags.has(tagName)) {
+        continue;
       }
       const data = { ...typeof props === "object" ? props : {} };
-      if (TagsWithInnerContent.has(type) && data.children) {
-        data[type === "script" ? "innerHTML" : "textContent"] = Array.isArray(data.children) ? data.children.map(String).join("") : data.children;
+      if (TagsWithInnerContent.has(tagName) && data.children) {
+        const contentKey = tagName === "script" ? "innerHTML" : "textContent";
+        data[contentKey] = Array.isArray(data.children) ? data.children.map(String).join("") : String(data.children);
       }
       delete data.children;
-      if (HasElementTags.has(type)) {
-        input[type] = input[type] || [];
-        input[type].push(data);
+      if (HasElementTags.has(tagName)) {
+        const key = tagName;
+        if (!Array.isArray(input[key])) {
+          input[key] = [];
+        }
+        input[key].push(data);
       } else {
-        input[type] = data;
+        input[tagName] = data;
       }
-    });
-    if (!headRef.current) {
-      headRef.current = head.push(input);
-    } else {
-      headRef.current.patch(input);
     }
-  }, [children, titleTemplate]);
+    return input;
+  }, [processedElements, titleTemplate]);
+  const headRef = useRef(
+    head.push(getHeadChanges())
+  );
+  useEffect(() => {
+    return () => {
+      if (headRef.current?.dispose) {
+        headRef.current.dispose();
+      }
+      headRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    headRef.current?.patch(getHeadChanges());
+  }, [getHeadChanges]);
   return null;
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/react",
   "type": "module",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -61,7 +61,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">=19"
+    "react": ">=18"
   },
   "build": {
     "external": [
@@ -69,12 +69,12 @@
     ]
   },
   "dependencies": {
-    "unhead": "2.0.2"
+    "unhead": "2.0.4"
   },
   "devDependencies": {
     "@testing-library/react": "^16.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "scripts": {
     "build": "unbuild",