name memoized components

packages/tldraw/src/TLDraw.tsx

@@ -421,14 +421,13 @@ function InnerTldraw({
   )
 }
 
-const OneOff = React.memo(
+const OneOff = React.memo(function OneOff({
-  ({
   focusableRef,
   autofocus,
-  }: {
+}: {
   autofocus?: boolean
   focusableRef: React.RefObject<HTMLDivElement>
-  }) => {
+}) {
   useKeyboardShortcuts(focusableRef)
   useStylesheet()
 
@@ -439,8 +438,7 @@ const OneOff = React.memo(
   }, [autofocus])
 
   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)