refactor to fix perf warns

Author: stipsan

.oxlintrc.json

@@ -11,6 +11,7 @@
     "no-console": "error",
     "no-array-sort": "off",
     "rules-of-hooks": "error",
+    "react/jsx-key": "error",
     "react-in-jsx-scope": "off",
     // @TODO these rules should be enabled, and the violations fixed
     "no-unsafe-type-assertion": "off"
@@ -30,7 +31,8 @@
       "rules": {
         "jsx-no-new-object-as-prop": "off",
         "jsx-no-new-array-as-prop": "off",
-        "jsx-no-jsx-as-prop": "off"
+        "jsx-no-jsx-as-prop": "off",
+        "jsx-no-new-function-as-prop": "off",
       }
     }
   ]

demo/components/SpeechSynthesis.tsx

@@ -1,6 +1,5 @@
 import type {PortableTextMarkComponent} from '@portabletext/react'
 
-import {useCallback} from 'react'
 
 interface SpeechSynthesisMark {
   _type: 'speech'
@@ -15,15 +14,15 @@ export const SpeechSynthesis: PortableTextMarkComponent<SpeechSynthesisMark> = (
   value,
 }) => {
   const pitch = value?.pitch || 1
-  const handleSynthesis = useCallback(() => {
-    const msg = new SpeechSynthesisUtterance()
+
+
+  return (
+    <button type="button" onClick={() => {
+      const msg = new SpeechSynthesisUtterance()
     msg.text = text
     msg.pitch = pitch
     window.speechSynthesis.speak(msg)
-  }, [text, pitch])
-
-  return (
-    <button type="button" onClick={handleSynthesis}>
+    }}>
       {children}
     </button>
   )

demo/components/TermDefinition.tsx

@@ -1,7 +1,7 @@
 import type {PortableTextMarkComponent} from '@portabletext/react'
 
 import {Popover, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {useState} from 'react'
 
 interface DefinitionMark {
   _type: 'definition'
@@ -10,8 +10,6 @@ interface DefinitionMark {
 
 export const TermDefinition: PortableTextMarkComponent<DefinitionMark> = ({value, children}) => {
   const [isOpen, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [setOpen])
-  const handleClose = useCallback(() => setOpen(false), [setOpen])
   return (
     <Popover
       animate
@@ -25,7 +23,7 @@ export const TermDefinition: PortableTextMarkComponent<DefinitionMark> = ({value
         </Text>
       }
     >
-      <span style={{textDecoration: 'underline'}} onMouseOver={handleOpen} onMouseOut={handleClose}>
+      <span style={{textDecoration: 'underline'}} onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}>
         {children}
       </span>
     </Popover>