Enable React Compiler

package.json

@@ -101,6 +101,7 @@
     "@vitejs/plugin-react": "^4.5.0",
     "@vitest/coverage-v8": "^3.2.3",
     "@vitest/eslint-plugin": "^1.3.4",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "emojibase-data": "^16.0.3",
     "eslint": "^9.29.0",
     "eslint-plugin-compat": "^6.0.2",

src/components/Chat/ChatMessages.tsx

@@ -72,13 +72,13 @@
 
   // Scroll to bottom again if the last message changes.
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
+  // Use a ref to avoid triggering the effect repeatedly when scrolling _up_ from the bottom.
+  const scrolledToBottomRef = useRef(isScrolledToBottom);
+  scrolledToBottomRef.current = isScrolledToBottom;
   useEffect(() => {
-    if (isScrolledToBottom && container.current) {
+    if (scrolledToBottomRef.current && container.current) {
       scrollToBottom(container.current);
     }
-    // We need to scroll to the bottom only if a new message comes in, not when the scroll-to-bottom
-    // state changed.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lastMessage]);
 
   // Accept externally controlled scrolling using the global event bus, so the chat input box

src/components/Chat/LogMessage.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 type LogMessageProps = {
   text: string,
 };
@@ -13,4 +11,4 @@ function LogMessage({ text }: LogMessageProps) {
   );
 }
 
-export default memo(LogMessage);
+export default LogMessage;

src/components/Chat/Message.tsx

@@ -1,7 +1,5 @@
 import cx from 'clsx';
-import {
-  memo, useCallback, useMemo, useRef,
-} from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import type { MarkupNode } from 'u-wave-parse-chat-markup';
 import type { User } from '../../reducers/users';
 import useUserCard from '../../hooks/useUserCard';
@@ -29,7 +27,7 @@ function DeleteButton({ onDelete }: DeleteButtonProps) {
 type MessageTimestampProps = {
   date: Date,
 };
-function MessageTimestampImpl({ date }: MessageTimestampProps) {
+function MessageTimestamp({ date }: MessageTimestampProps) {
   const { timeFormatter } = useIntl();
 
   return (
@@ -41,7 +39,6 @@ function MessageTimestampImpl({ date }: MessageTimestampProps) {
     </time>
   );
 }
-const MessageTimestamp = memo(MessageTimestampImpl);
 
 type ChatMessageProps = {
   _id: string,

src/components/Chat/Motd.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MarkupNode } from 'u-wave-parse-chat-markup';
 import Markup, { type CompileOptions } from './Markup';
 
@@ -16,4 +15,4 @@ function Motd({ children, compileOptions }: MotdProps) {
   );
 }
 
-export default React.memo(Motd);
+export default Motd;

src/components/Dialogs/LoginDialog/SocialLogin.tsx

@@ -1,26 +1,24 @@
-import React from 'react';
+import { lazy, Suspense } from 'react';
 import { useTranslator } from '@u-wave/react-translate';
 import { useDispatch } from '../../../hooks/useRedux';
 import { loginWithGoogle } from '../../../actions/LoginActionCreators';
 
-const GoogleButton = React.lazy(() => (
-  import('react-google-button')
-));
+const GoogleButton = lazy(() => import('react-google-button'));
 const loadingGoogleButton = <div style={{ height: 50 }} />;
 
 function SocialLogin() {
   const { t } = useTranslator();
   const dispatch = useDispatch();
 
   return (
-    <React.Suspense fallback={loadingGoogleButton}>
+    <Suspense fallback={loadingGoogleButton}>
       <GoogleButton
         style={{ width: '100%' }}
         label={t('login.social.loginWithGoogle')}
         onClick={() => dispatch(loginWithGoogle())}
       />
-    </React.Suspense>
+    </Suspense>
   );
 }
 
-export default React.memo(SocialLogin);
+export default SocialLogin;

src/components/FooterBar/SettingsButton.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { useTranslator } from '@u-wave/react-translate';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
@@ -22,4 +21,4 @@ function SettingsButton({ onClick }: SettingsButtonProps) {
   );
 }
 
-export default memo(SettingsButton);
+export default SettingsButton;

src/components/FooterBar/SkipButton.tsx

@@ -1,5 +1,4 @@
 import {
-  memo,
   useCallback,
   useRef,
   useState,
@@ -107,4 +106,4 @@ function SkipButton({ userIsDJ, currentDJ, onSkip }: SkipButtonProps) {
   );
 }
 
-export default memo(SkipButton);
+export default SkipButton;

src/components/FooterBar/UserInfo.tsx

@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import { memo } from 'react';
 import { mdiCog } from '@mdi/js';
 import Avatar from '../Avatar';
 import SvgIcon from '../SvgIcon';
@@ -28,4 +27,4 @@ function UserInfo({ className, user, onClick }: UserInfoProps) {
   );
 }
 
-export default memo(UserInfo);
+export default UserInfo;

src/components/HeaderBar/HistoryButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslator } from '@u-wave/react-translate';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
@@ -25,4 +24,4 @@ function HistoryButton({ onClick }: HistoryButtonProps) {
   );
 }
 
-export default React.memo(HistoryButton);
+export default HistoryButton;

src/components/MediaList/MediaSourceIcon.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { useMediaSources } from '../../context/MediaSourceContext';
 
 type MediaSourceIconProps = {
@@ -22,4 +21,4 @@ function MediaSourceIcon({ sourceType }: MediaSourceIconProps) {
   );
 }
 
-export default memo(MediaSourceIcon);
+export default MediaSourceIcon;

src/components/MediaList/MediaThumbnail.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 type MediaThumbnailProps = {
   url: string,
 };
@@ -16,4 +14,4 @@ function MediaThumbnail({ url }: MediaThumbnailProps) {
   );
 }
 
-export default memo(MediaThumbnail);
+export default MediaThumbnail;

src/components/MediaList/Row.tsx

@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import React from 'react';
 import MediaRowBase from './MediaRowBase';
 import MediaDuration from './MediaDuration';
 import MediaLoadingIndicator from './MediaLoadingIndicator';
@@ -56,4 +55,4 @@ function MediaRow({
   );
 }
 
-export default React.memo(MediaRow);
+export default MediaRow;

src/components/SearchBar/index.tsx

@@ -30,12 +30,11 @@ function SearchBar({
     }
   }, [onSubmit]);
 
+  const initialAutoFocus = useRef(autoFocus ?? false);
   useEffect(() => {
-    if (autoFocus && inputRef.current) {
+    if (initialAutoFocus.current && inputRef.current != null) {
       inputRef.current.focus();
     }
-    // `autoFocus` is only checked on mount on purpose.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/SongTitle/index.tsx

@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import React from 'react';
 
 type SongTitleProps = {
   className?: string,
@@ -29,4 +28,4 @@ function SongTitle({
   );
 }
 
-export default React.memo(SongTitle);
+export default SongTitle;

src/components/SvgIcon/index.tsx

@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import React from 'react';
 
 export interface SvgIconProps extends Omit<React.ComponentProps<'svg'>, 'ref'> {
   path?: string;
@@ -18,4 +17,4 @@ function SvgIcon({
   );
 }
 
-export default React.memo(SvgIcon);
+export default SvgIcon;

src/components/Username/index.tsx

@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import React from 'react';
 import RoleColor from '../RoleColor';
 
 type UsernameProps = {
@@ -18,4 +17,4 @@ function Username({ className, user }: UsernameProps) {
   );
 }
 
-export default React.memo(Username);
+export default Username;

vite.config.mjs

@@ -38,7 +38,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    react(),
+    react({
+      babel: {
+        plugins: [
+          ['react-compiler', { target: '19' }],
+        ],
+      },
+    }),
     yaml(),
     prerender({ file: 'index.html', source: 'src/index.tsx' }),
     prerender({ file: 'password-reset.html', source: 'src/password-reset/index.tsx' }),