playground: bump react to 19 (#671)

Author: sbdchd

playground/package.json

@@ -17,18 +17,18 @@
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.2",
     "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "tailwindcss": "^4.1.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^4.7.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "eslint": "^9.34.0",
-    "eslint-plugin-react-hooks": "6.0.0-rc1",
+    "eslint-plugin-react-hooks": "6.1.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^15.15.0",
     "typescript": "~5.7.3",

playground/pnpm-lock.yaml

@@ -1,4 +1,10 @@
-import { useState, useEffect, useLayoutEffect, useRef } from "react"
+import {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useEffectEvent,
+} from "react"
 import * as monaco from "monaco-editor"
 import { LintError, Fix, useDumpCst, useDumpTokens, useErrors } from "./squawk"
 import {
@@ -233,22 +239,18 @@ function Editor({
   settings: monaco.editor.IStandaloneEditorConstructionOptions
   markers?: Marker[]
 }) {
-  const onChangeRef = useRef<((_: string) => void) | undefined>(null)
-  const onSaveRef = useRef<((_: string) => void) | undefined>(null)
+  const onChangeText = useEffectEvent((text: string) => {
+    onChange?.(text)
+  })
+  const onSaveText = useEffectEvent((text: string) => {
+    onSave?.(text)
+  })
   const divRef = useRef<HTMLDivElement>(null)
   const autoFocusRef = useRef(autoFocus)
   const settingsInitial = useRef(settings)
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(null)
   const fixesRef = useRef<Map<string, Fix>>(new Map())
 
-  // TODO: replace with useEventEffect
-  useEffect(() => {
-    onChangeRef.current = onChange
-  }, [onChange])
-  useEffect(() => {
-    onSaveRef.current = onSave
-  }, [onSave])
-
   useEffect(() => {
     if (markers == null) {
       return
@@ -275,10 +277,10 @@ function Editor({
       settingsInitial.current,
     )
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () =>
-      onSaveRef.current?.(editor.getValue()),
+      onSaveText(editor.getValue()),
     )
     editor.onDidBlurEditorText(() => {
-      onSaveRef.current?.(editor.getValue())
+      onSaveText(editor.getValue())
     })
     monaco.languages.register({ id: "rast" })
     const tokenProvider = monaco.languages.setMonarchTokensProvider("rast", {
@@ -346,7 +348,7 @@ function Editor({
     )
 
     editor.onDidChangeModelContent(() => {
-      onChangeRef.current?.(editor.getValue())
+      onChangeText(editor.getValue())
     })
     if (autoFocusRef.current) {
       editor.focus()