WIP

Author: birdofpreyru

src/Helmet.tsx

@@ -86,11 +86,13 @@ function reduceChildrenAndProps(props: HelmetProps): Omit<HelmetProps, 'children
   for (const item of Object.values(props)) {
     if (Array.isArray(item)) {
       for (const it of item) {
-        for (const key of Object.keys(it)) {
-          const p = getPropName(key);
-          if (p !== key) {
-            it[p] = it[key as keyof HelmetChildProps] as unknown;
-            delete it[key as keyof HelmetChildProps];
+        if (it) {
+          for (const key of Object.keys(it)) {
+            const p = getPropName(key);
+            if (p !== key) {
+              it[p] = it[key as keyof HelmetChildProps] as unknown;
+              delete it[key as keyof HelmetChildProps];
+            }
           }
         }
       }
@@ -162,7 +164,7 @@ function reduceChildrenAndProps(props: HelmetProps): Omit<HelmetProps, 'children
       case TAG_NAMES.LINK:
       case TAG_NAMES.META:
         if (nestedChildren) throw Error(
-          `<${type} /> elements are self-closing and cannot contain children`,
+          `<${type} /> elements are self-closing and can not contain children. Refer to our API for more information.`,
         );
         pushToPropArray(res, type, childProps as LinkProps | MetaProps);
         break;
@@ -227,6 +229,7 @@ const Helmet: FunctionComponent<HelmetProps> = (props) => {
   // for now to ensure backward compatibility.
   useEffect(() => {
     context.update(id, reduceChildrenAndProps(props));
+    context.clientApply();
   });
 
   useEffect(() => () => context.update(id, undefined), [context, id]);

src/Provider.tsx

@@ -31,6 +31,7 @@ const HelmetProvider: FunctionComponent<ProviderProps> = ({
   context,
 }) => {
   const { current: heap } = useRef<HelmetProviderHeap>({
+    firstRender: true,
     helmets: [],
     state: undefined,
   });
@@ -46,7 +47,8 @@ const HelmetProvider: FunctionComponent<ProviderProps> = ({
             if (heap.nextAnimFrameId === undefined) {
               heap.nextAnimFrameId = requestAnimationFrame(() => {
                 heap.state ??= calcAggregatedState(heap.helmets);
-                commitTagChanges(heap.state);
+                commitTagChanges(heap.state, heap.firstRender);
+                heap.firstRender = false;
                 delete heap.nextAnimFrameId;
               });
             }
@@ -55,7 +57,8 @@ const HelmetProvider: FunctionComponent<ProviderProps> = ({
               cancelAnimationFrame(heap.nextAnimFrameId);
               delete heap.nextAnimFrameId;
             }
-            commitTagChanges(heap.state);
+            commitTagChanges(heap.state, heap.firstRender);
+            heap.firstRender = false;
           }
         }
       },
@@ -69,24 +72,6 @@ const HelmetProvider: FunctionComponent<ProviderProps> = ({
           delete heap.state;
           heap.helmets.push([id, props]);
         }
-        if (IS_DOM_ENVIRONMENT && !heap.state) {
-          heap.state = calcAggregatedState(heap.helmets);
-          if (heap.state.defer) {
-            if (heap.nextAnimFrameId === undefined) {
-              heap.nextAnimFrameId = requestAnimationFrame(() => {
-                heap.state ??= calcAggregatedState(heap.helmets);
-                commitTagChanges(heap.state);
-                delete heap.nextAnimFrameId;
-              });
-            }
-          } else {
-            if (heap.nextAnimFrameId !== undefined) {
-              cancelAnimationFrame(heap.nextAnimFrameId);
-              delete heap.nextAnimFrameId;
-            }
-            commitTagChanges(heap.state);
-          }
-        }
       },
     };
   }

src/client.ts

@@ -144,7 +144,10 @@ function updateTitle(title: string | undefined, attributes: Attributes) {
   updateAttributes(TAG_NAMES.TITLE, attributes);
 }
 
-export function commitTagChanges(newState: AggregatedState) {
+export function commitTagChanges(
+  newState: AggregatedState,
+  firstRender: boolean,
+) {
   const {
     base,
     bodyAttributes,
@@ -191,5 +194,7 @@ export function commitTagChanges(newState: AggregatedState) {
     }
   });
 
-  newState?.onChangeClientState?.(resultTags, addedTags, removedTags);
+  if (firstRender || Object.keys(addedTags).length || Object.keys(removedTags).length) {
+    newState?.onChangeClientState?.(resultTags, addedTags, removedTags);
+  }
 }

src/types.ts

@@ -233,6 +233,10 @@ export type ContextValue = {
 };
 
 export type HelmetProviderHeap = {
+  // TODO: Temporary, to keep legacy behavior to call onChange client-side
+  // callback on the first render.
+  firstRender: boolean;
+
   helmets: RegisteredHelmetPropsArray;
   nextAnimFrameId?: number;
   serverState?: HelmetServerState;