Avoid mutating meta object when tagName is specified

.changeset/dont-mutate-meta.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Avoid mutating `meta` object when `tagName` is specified

package.json

@@ -73,6 +73,7 @@
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/cheerio": "^0.22.22",
     "@types/cross-spawn": "^6.0.2",
     "@types/dedent": "^0.7.0",

packages/remix-react/__tests__/integration/meta-test.tsx

@@ -1,7 +1,8 @@
-import * as React from "react";
 import { Meta, Outlet } from "@remix-run/react";
 import { unstable_createRemixStub } from "@remix-run/testing";
-import { prettyDOM, render } from "@testing-library/react";
+import { prettyDOM, render, screen } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import * as React from "react";
 
 const getHtml = (c: HTMLElement) =>
   prettyDOM(c, undefined, { highlight: false });
@@ -268,6 +269,65 @@ describe("meta", () => {
     `);
   });
 
+  it("does not mutate meta when using tagName", async () => {
+    let RemixStub = unstable_createRemixStub([
+      {
+        path: "/",
+        meta: ({ data }) => data?.meta,
+        loader: () => ({
+          meta: [
+            {
+              tagName: "link",
+              rel: "canonical",
+              href: "https://website.com/authors/1",
+            },
+          ],
+        }),
+        Component() {
+          let [count, setCount] = React.useState(0);
+          return (
+            <>
+              <button onClick={() => setCount(count + 1)}>
+                {`Increment ${count}`}
+              </button>
+              <Meta key={count} />
+            </>
+          );
+        },
+      },
+    ]);
+
+    let { container } = render(<RemixStub />);
+
+    await screen.findByText("Increment 0");
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <button>
+          Increment 0
+        </button>
+        <link
+          href="https://website.com/authors/1"
+          rel="canonical"
+        />
+      </div>"
+    `);
+
+    user.click(screen.getByRole("button"));
+    await screen.findByText("Increment 1");
+
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <button>
+          Increment 1
+        </button>
+        <link
+          href="https://website.com/authors/1"
+          rel="canonical"
+        />
+      </div>"
+    `);
+  });
+
   it("loader errors are passed to meta", () => {
     let RemixStub = unstable_createRemixStub([
       {

packages/remix-react/components.tsx

@@ -512,16 +512,15 @@ export function Meta() {
         }
 
         if ("tagName" in metaProps) {
-          let tagName = metaProps.tagName;
-          delete metaProps.tagName;
+          let { tagName, ...rest } = metaProps;
           if (!isValidMetaTag(tagName)) {
             console.warn(
               `A meta object uses an invalid tagName: ${tagName}. Expected either 'link' or 'meta'`
             );
             return null;
           }
           let Comp = tagName;
-          return <Comp key={JSON.stringify(metaProps)} {...metaProps} />;
+          return <Comp key={JSON.stringify(rest)} {...rest} />;
         }
 
         if ("title" in metaProps) {

yarn.lock

@@ -2340,6 +2340,11 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
+"@testing-library/user-event@^14.5.1":
+  version "14.5.1"
+  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
+  integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"