fix(remix-react): don't warn about runtime deprecation warnings in pr…

…oduction (#5874)

.changeset/mean-deers-wink.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+don't warn about runtime deprecation warnings in production

packages/remix-react/browser.tsx

@@ -14,7 +14,7 @@ import {
 import { deserializeErrors } from "./errors";
 import type { RouteModules } from "./routeModules";
 import { createClientRoutes } from "./routes";
-import { warnOnce } from "./warnings";
+import { logDeprecationOnce } from "./warnings";
 
 /* eslint-disable prefer-let/prefer-let */
 declare global {
@@ -140,8 +140,7 @@ if (import.meta && import.meta.hot) {
 export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
   if (!router) {
     if (!window.__remixContext.future.v2_errorBoundary) {
-      warnOnce(
-        false,
+      logDeprecationOnce(
         "⚠️  DEPRECATED: The separation of `CatchBoundary` and `ErrorBoundary` has " +
           "been deprecated and Remix v2 will use a singular `ErrorBoundary` for " +
           "all thrown values (`Response` and `Error`). Please migrate to the new " +
@@ -152,8 +151,7 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
     }
 
     if (!window.__remixContext.future.v2_normalizeFormMethod) {
-      warnOnce(
-        false,
+      logDeprecationOnce(
         "⚠️  DEPRECATED: Please enable the `future.v2_normalizeFormMethod` flag to " +
           "prepare for the Remix v2 release. Lowercase `useNavigation().formMethod`" +
           "values are being normalized to uppercase in v2 to align with the `fetch()` " +

packages/remix-react/components.tsx

@@ -75,7 +75,7 @@ import type {
   TransitionStates,
 } from "./transition";
 import { IDLE_TRANSITION, IDLE_FETCHER } from "./transition";
-import { warnOnce } from "./warnings";
+import { logDeprecationOnce } from "./warnings";
 
 function useDataRouterContext() {
   let context = React.useContext(DataRouterContext);
@@ -368,13 +368,14 @@ export function Links() {
   );
 
   React.useEffect(() => {
-    warnOnce(
-      links.some((link) => "imagesizes" in link || "imagesrcset" in link),
-      "⚠️ DEPRECATED: The `imagesizes` & `imagesrcset` properties in " +
-        "your links have been deprecated in favor of `imageSizes` & " +
-        "`imageSrcSet` and support will be removed in Remix v2. Please update " +
-        "your code to use the new property names instead."
-    );
+    if (links.some((link) => "imagesizes" in link || "imagesrcset" in link)) {
+      logDeprecationOnce(
+        "⚠️ DEPRECATED: The `imagesizes` & `imagesrcset` properties in " +
+          "your links have been deprecated in favor of `imageSizes` & " +
+          "`imageSrcSet` and support will be removed in Remix v2. Please update " +
+          "your code to use the new property names instead."
+      );
+    }
   }, [links]);
 
   return (
@@ -1234,8 +1235,7 @@ export function useTransition(): Transition {
   let navigation = useNavigation();
 
   React.useEffect(() => {
-    warnOnce(
-      false,
+    logDeprecationOnce(
       "⚠️ DEPRECATED: The `useTransition` hook has been deprecated in favor of " +
         "`useNavigation` and will be removed in Remix v2.  Please update your " +
         "code to leverage `useNavigation`.\n\nSee https://remix.run/docs/hooks/use-transition " +
@@ -1472,8 +1472,7 @@ function addFetcherDeprecationWarnings(fetcher: Fetcher) {
   let type: Fetcher["type"] = fetcher.type;
   Object.defineProperty(fetcher, "type", {
     get() {
-      warnOnce(
-        false,
+      logDeprecationOnce(
         "⚠️ DEPRECATED: The `useFetcher().type` field has been deprecated and " +
           "will be removed in Remix v2.  Please update your code to rely on " +
           "`fetcher.state`.\n\nSee https://remix.run/docs/hooks/use-fetcher for " +
@@ -1494,8 +1493,7 @@ function addFetcherDeprecationWarnings(fetcher: Fetcher) {
   let submission: Fetcher["submission"] = fetcher.submission;
   Object.defineProperty(fetcher, "submission", {
     get() {
-      warnOnce(
-        false,
+      logDeprecationOnce(
         "⚠️ DEPRECATED: The `useFetcher().submission` field has been deprecated and " +
           "will be removed in Remix v2.  The submission fields now live directly " +
           "on the fetcher (`fetcher.formData`).\n\n" +

packages/remix-react/warnings.ts

@@ -6,3 +6,13 @@ export function warnOnce(condition: boolean, message: string): void {
     console.warn(message);
   }
 }
+
+export function logDeprecationOnce(
+  message: string,
+  key: string = message
+): void {
+  if (process.env.NODE_ENV !== "production" && !alreadyWarned[key]) {
+    alreadyWarned[key] = true;
+    console.warn(message);
+  }
+}