chore: upgrade to react 19 beta and next 14 canary

app/text/diff/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useState } from "react";
 import { Panel, PanelGroup } from "react-resizable-panels";
 
 import { PERSISTENCE_KEY } from "@/config/persistence-keys";
@@ -27,71 +27,56 @@ export default function Page() {
   const [input2, setInput2] = useState<string | undefined>("Hello, World!");
   const [diffFullHeight, setDiffFullHeight] = useState(false);
   const [inlineMode, setInlineMode] = useState(false);
-  const diffPanelMaxSize = useMemo(
-    () => (diffFullHeight ? PANEL_FULL_SIZE : VERTICAL_PANEL_MAX_SIZE),
-    [diffFullHeight]
+  const diffPanelMaxSize = diffFullHeight ? PANEL_FULL_SIZE : VERTICAL_PANEL_MAX_SIZE;
+
+  const clearInput1 = () => setInput1("");
+  const clearInput2 = () => setInput2("");
+  const toggleFullHeight = () => setDiffFullHeight(prev => !prev);
+
+  const inlineModeConfig = (
+    <Configuration
+      icon={<icons.Rows size={24} />}
+      title="Inline mode"
+      control={
+        <LabeledSwitch
+          id="uppercase-switch"
+          label={inlineMode ? "On" : "Off"}
+          checked={inlineMode}
+          onCheckedChange={setInlineMode}
+          aria-label="toggle whether to show diff in inline mode"
+        />
+      }
+    />
+  );
+  const input1Control = (
+    <ControlMenu
+      list={[
+        <Button.Paste onClipboardRead={setInput1} />,
+        <Button.File onFileRead={setInput1} iconOnly aria-label="load a file with old text" />,
+        <Button.Clear onClick={clearInput1} iconOnly aria-label="clear old text input" />,
+      ]}
+    />
   );
 
-  const clearInput1 = useCallback(() => setInput1(""), [setInput1]);
-  const clearInput2 = useCallback(() => setInput2(""), [setInput2]);
-  const toggleFullHeight = useCallback(() => setDiffFullHeight(prev => !prev), [setDiffFullHeight]);
-
-  const inlineModeConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.Rows size={24} />}
-        title="Inline mode"
-        control={
-          <LabeledSwitch
-            id="uppercase-switch"
-            label={inlineMode ? "On" : "Off"}
-            checked={inlineMode}
-            onCheckedChange={setInlineMode}
-            aria-label="toggle whether to show diff in inline mode"
-          />
-        }
-      />
-    ),
-    [inlineMode, setInlineMode]
-  );
-  const input1Control = useMemo(
-    () => (
-      <ControlMenu
-        list={[
-          <Button.Paste onClipboardRead={setInput1} />,
-          <Button.File onFileRead={setInput1} iconOnly aria-label="load a file with old text" />,
-          <Button.Clear onClick={clearInput1} iconOnly aria-label="clear old text input" />,
-        ]}
-      />
-    ),
-    [setInput1, clearInput1]
+  const input2Control = (
+    <ControlMenu
+      list={[
+        <Button.Paste onClipboardRead={setInput2} />,
+        <Button.File onFileRead={setInput2} iconOnly aria-label="load a file with new text" />,
+        <Button.Clear onClick={clearInput2} iconOnly aria-label="clear new text input" />,
+      ]}
+    />
   );
 
-  const input2Control = useMemo(
-    () => (
-      <ControlMenu
-        list={[
-          <Button.Paste onClipboardRead={setInput2} />,
-          <Button.File onFileRead={setInput2} iconOnly aria-label="load a file with new text" />,
-          <Button.Clear onClick={clearInput2} iconOnly aria-label="clear new text input" />,
-        ]}
-      />
-    ),
-    [setInput2, clearInput2]
+  const diffControl = (
+    <ControlMenu
+      list={[
+        <Button.ToggleFullSize iconOnly onClick={toggleFullHeight} expanded={diffFullHeight} />,
+      ]}
+    />
   );
 
-  const diffControl = useMemo(
-    () => (
-      <ControlMenu
-        list={[
-          <Button.ToggleFullSize iconOnly onClick={toggleFullHeight} expanded={diffFullHeight} />,
-        ]}
-      />
-    ),
-    [diffFullHeight, toggleFullHeight]
-  );
-
-  const hiddenInFullHeightMode = useMemo(() => (diffFullHeight ? "hidden" : ""), [diffFullHeight]);
+  const hiddenInFullHeightMode = diffFullHeight ? "hidden" : "";
 
   return (
     <PageRootSection className="h-full" title={toolGroups.text.tools.diff.longTitle}>
@@ -106,6 +91,7 @@ export default function Page() {
           >
             <Panel maxSize={HORIZONTAL_PANEL_MAX_SIZE}>
               <PageSection className="h-full" title="Old text" control={input1Control}>
+                {/* @ts-expect-error react 19 beta error */}
                 <Editor value={input1} onChange={setInput1} />
               </PageSection>
             </Panel>
@@ -113,6 +99,7 @@ export default function Page() {
 
             <Panel maxSize={HORIZONTAL_PANEL_MAX_SIZE}>
               <PageSection className="h-full" title="New text" control={input2Control}>
+                {/* @ts-expect-error react 19 beta error */}
                 <Editor value={input2} onChange={setInput2} />
               </PageSection>
             </Panel>
@@ -121,9 +108,14 @@ export default function Page() {
         <PanelResizeHandle direction="horizontal" className={hiddenInFullHeightMode} />
         <Panel maxSize={diffPanelMaxSize}>
           <PageSection className="h-full" title="Difference" control={diffControl}>
+            {/* @ts-expect-error react 19 beta error */}
             <DiffEditor
+              // @ts-expect-error react 19 beta error
               original={input1}
+              // @ts-expect-error react 19 beta error
               modified={input2}
+              // @ts-expect-error react 19 beta error
+
               options={{
                 readOnly: true,
                 renderSideBySide: !inlineMode,

app/text/inspector/layout.tsx

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import { Metadata } from "next";
 
 import { toolGroups } from "@/config/tools";
@@ -12,6 +13,6 @@ export const metadata: Metadata = {
   },
 };
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }: PropsWithChildren) {
   return children;
 }

app/text/inspector/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useState } from "react";
 
 import { toolGroups } from "@/config/tools";
 import { noOp } from "@/lib/base";
@@ -27,17 +27,14 @@ export default function Page() {
 
   const output = transformText(input, mode);
 
-  const stats = useMemo(
-    () => ({
-      characters: countCharacters(input),
-      words: countWords(input),
-      lines: countLines(input),
-      bytes: countBytes(input),
-    }),
-    [input]
-  );
+  const stats = {
+    characters: countCharacters(input),
+    words: countWords(input),
+    lines: countLines(input),
+    bytes: countBytes(input),
+  };
 
-  const clearInput = useCallback(() => setInput(""), []);
+  const clearInput = () => setInput("");
 
   const onInputChange: TextareaProps["onChange"] = e => setInput(e.currentTarget.value);
   const onModeChange = (value: string) => {

app/text/layout.tsx

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import { Metadata } from "next";
 
 import { toolGroups } from "@/config/tools";
@@ -11,6 +12,6 @@ export const metadata: Metadata = {
   },
 };
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }: PropsWithChildren) {
   return children;
 }