name memoized components

packages/tldraw/src/TLDraw.tsx

@@ -421,26 +421,24 @@ function InnerTldraw({
   )
 }
 
-const OneOff = React.memo(
-  ({
-    focusableRef,
-    autofocus,
-  }: {
-    autofocus?: boolean
-    focusableRef: React.RefObject<HTMLDivElement>
-  }) => {
-    useKeyboardShortcuts(focusableRef)
-    useStylesheet()
+const OneOff = React.memo(function OneOff({
+  focusableRef,
+  autofocus,
+}: {
+  autofocus?: boolean
+  focusableRef: React.RefObject<HTMLDivElement>
+}) {
+  useKeyboardShortcuts(focusableRef)
+  useStylesheet()
 
-    React.useEffect(() => {
-      if (autofocus) {
-        focusableRef.current?.focus()
-      }
-    }, [autofocus])
+  React.useEffect(() => {
+    if (autofocus) {
+      focusableRef.current?.focus()
+    }
+  }, [autofocus])
 
-    return null
-  }
-)
+  return null
+})
 
 const StyledLayout = styled('div', {
   position: 'absolute',

packages/tldraw/src/components/ToolsPanel/BackToContent.tsx

@@ -9,7 +9,7 @@ const isEmptyCanvasSelector = (s: Data) =>
   Object.keys(s.document.pages[s.appState.currentPageId].shapes).length > 0 &&
   s.appState.isEmptyCanvas
 
-export const BackToContent = React.memo(() => {
+export const BackToContent = React.memo(function BackToContent() {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const isEmptyCanvas = useSelector(isEmptyCanvasSelector)

packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx

@@ -15,7 +15,7 @@ import { Panel } from '~components/Panel'
 
 const activeToolSelector = (s: Data) => s.appState.activeTool
 
-export const PrimaryTools = React.memo((): JSX.Element => {
+export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const activeTool = useSelector(activeToolSelector)

packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx

@@ -10,7 +10,7 @@ import { LockButton } from './LockButton'
 
 const isDebugModeSelector = (s: Data) => s.settings.isDebugMode
 
-export const ToolsPanel = React.memo((): JSX.Element => {
+export const ToolsPanel = React.memo(function ToolsPanel(): JSX.Element {
   const { useSelector } = useTLDrawContext()
 
   const isDebugMode = useSelector(isDebugModeSelector)

packages/tldraw/src/components/TopPanel/ColorMenu.tsx

@@ -11,7 +11,7 @@ const selectColor = (s: Data) => s.appState.selectedStyle.color
 const preventEvent = (e: Event) => e.preventDefault()
 const themeSelector = (data: Data) => (data.settings.isDarkMode ? 'dark' : 'light')
 
-export const ColorMenu = React.memo((): JSX.Element => {
+export const ColorMenu = React.memo(function ColorMenu(): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const theme = useSelector(themeSelector)

packages/tldraw/src/components/TopPanel/DashMenu.tsx

@@ -17,7 +17,7 @@ const selectDash = (s: Data) => s.appState.selectedStyle.dash
 
 const preventEvent = (e: Event) => e.preventDefault()
 
-export const DashMenu = React.memo((): JSX.Element => {
+export const DashMenu = React.memo(function DashMenu(): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const dash = useSelector(selectDash)

packages/tldraw/src/components/TopPanel/FillCheckbox.tsx

@@ -7,7 +7,7 @@ import { ToolButton } from '~components/ToolButton'
 
 const isFilledSelector = (s: Data) => s.appState.selectedStyle.isFilled
 
-export const FillCheckbox = React.memo((): JSX.Element => {
+export const FillCheckbox = React.memo(function FillCheckbox(): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const isFilled = useSelector(isFilledSelector)

packages/tldraw/src/components/TopPanel/Menu.tsx

@@ -11,7 +11,7 @@ interface MenuProps {
   readOnly: boolean
 }
 
-export const Menu = React.memo(({ readOnly }: MenuProps) => {
+export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
   const { tlstate, callbacks } = useTLDrawContext()
 
   const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers()

packages/tldraw/src/components/TopPanel/SizeMenu.tsx

@@ -16,7 +16,7 @@ const selectSize = (s: Data) => s.appState.selectedStyle.size
 
 const preventEvent = (e: Event) => e.preventDefault()
 
-export const SizeMenu = React.memo((): JSX.Element => {
+export const SizeMenu = React.memo(function SizeMenu(): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
 
   const size = useSelector(selectSize)