Bundling with React 19 + React compiler & dependency upgrades #1735

Aerilym · 2025-12-12T05:31:59Z

Upgrades:

React 19
Electron Builder 26
Redux 5
Zod 4

Building:

React compiler
Babel (for bundling)
Terser (for minification)

Dependency tweaks:

Locked to specific version resolutions of many dependencies

Copilot

Pull request overview

This pull request upgrades Session Desktop to React 19 with React compiler support and updates several major dependencies (Electron Builder 26, Redux 5, Zod 4). The changes include Babel for bundling and Terser for minification, along with refactoring of test utilities, selectors, and type definitions to align with the new library versions.

Key Changes

Upgraded React 18→19, Redux 4→5, Zod 3→4, Electron Builder to v26
Integrated React compiler and updated build toolchain (Babel, Terser)
Migrated test utilities from react-test-renderer to @testing-library/react
Refactored selectors to be hook-independent for React compiler compatibility
Fixed type definitions for better type safety with React 19

Reviewed changes

Copilot reviewed 166 out of 167 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
yarn.lock	Major dependency upgrades including React 19, Redux 5, Zod 4, Electron Builder 26, Babel, and Terser
ts/util/urlHistory.ts	Updated Zod enum usage from `z.nativeEnum` to `z.enum` for Zod 4 compatibility
ts/types/Util.ts	Added JSX type import for React 19 compatibility
ts/themes/globals.tsx	Improved type safety by splitting duration functions and fixing type coercion
ts/test/components/renderComponent.tsx	Migrated from react-test-renderer to @testing-library/react with new testing APIs
ts/test/components/SessionInput_test.tsx	Updated test to use new findAllByTagName API
ts/test/components/AvatarPlaceHolder_test.tsx	Updated tests to use DOM queries instead of React element tree inspection
ts/state/selectors/userGroups.ts	Exported getGroupById for use in other selectors
ts/state/selectors/selectedConversation.ts	Refactored hooks to use selector functions for React compiler compatibility
ts/state/selectors/proBackendData.ts	Major refactor adding data processing logic and mock feature flag support
ts/state/selectors/onions.ts	Exported selectors directly, removing intermediate hook wrappers
ts/state/selectors/messages.ts	Removed unnecessary useMemo calls and refactored for React compiler
ts/state/selectors/groups.ts	Exported selectLibGroupName for reuse
ts/state/reducer.ts	Added RootState type export
ts/state/ducks/types/releasedFeaturesReduxTypes.ts	Renamed hooks to `*Memo` pattern for clarity

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Bilb · 2025-12-15T02:16:31Z

ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx

+function useAvatarBgColorInternal(pubkey: string) {
+  return useAvatarBgColor(pubkey);
+}


this is fine with me, but I assume this is not enough to make react compiler happy?

Suggested change

function useAvatarBgColorInternal(pubkey: string) {

return useAvatarBgColor(pubkey);

}

const useAvatarBgColorInternal = useAvatarBgColor

Bilb · 2025-12-15T02:16:50Z

ts/components/basic/MessageBodyHighlight.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import type { JSX } from 'react';


this needs to be here?

Bilb · 2025-12-15T02:30:33Z

ts/components/conversation/message/message-content/MessageContextMenu.tsx

-  const { docX, docY } = useMouse(contextMenuRef);
+  const contextMenuRef = useRef<HTMLDivElement | null>(null);
+  // FIXME: remove as cast
+  const { docX, docY } = useMouse(contextMenuRef as RefObject<Element>);


can this be removed?

Bilb · 2025-12-15T02:43:19Z

ts/components/conversation/SubtleNotification.tsx

+// NOTE: [react-compiler] this has to live here for the hook to be identified as static
+function useConversationDetailsInternal() {
  const selectedConversation = useSelectedConversationKey();
  const hasMessages = useSelectedHasMessages();
  const isGroupV2 = useSelectedIsGroupV2();
  const isInvitePending = useLibGroupInvitePending(selectedConversation);
-
  const isPrivate = useSelectedIsPrivate();
  const isIncomingRequest = useIsIncomingRequest(selectedConversation);

+  return {
+    selectedConversation,
+    hasMessages,
+    isGroupV2,
+    isInvitePending,
+    isPrivate,
+    isIncomingRequest,
+  };
+}


All of those are a bit annoying, but hopefully we can find a way to make this work without the hassle at some point.

This returns a new object each times though, no need to wrap it into a useMemo supposedly, correct?

Bilb · 2025-12-15T02:45:33Z

ts/components/dialog/debug/playgrounds/PopoverPlaygroundPage.tsx

-  const t4 = useTriggerPosition(r4);
-  const t5 = useTriggerPosition(r5);
-  const t6 = useTriggerPosition(r6);
+  // FIXME: remove as cast


can be fixed now?

Bilb · 2025-12-15T03:24:59Z

ts/components/SessionTooltip.tsx

+  const ref = useRef<HTMLDivElement>(null);

-  const triggerPos = useTriggerPosition(ref);
+  // FIXME: remove this as cast


Bilb · 2025-12-15T03:27:32Z

ts/components/menuAndSettingsHooks/useShowLeaveGroup.ts

-export function useShowDeleteGroupCb(conversationId?: string) {
-  // Note: useShowLeaveGroupCb and useShowDeleteGroupCb are dependent on each other
-  // so I kept them in the same file
+// NOTE: [react-compiler] if we memoise this ourselves the compiler gets angry, but it will memoise it for us


Bilb · 2025-12-15T03:28:01Z

ts/components/SessionInboxView.tsx

 export const SessionInboxView = () => {
  if (!window.inboxStore) {
-    return null;
+    throw new Error('window.inboxStore is undefined in SessionInboxView');


the unit tests are fine with this?

Bilb · 2025-12-15T03:28:26Z

ts/components/SessionInboxView.tsx

Where did you move this?

Bilb · 2025-12-15T06:03:49Z

babel.config.js

damn, I didn't think we'd had to write that much to get babel setup!

Aerilym added 13 commits December 8, 2025 11:21

chore: add start option for performance metrics

44e043b

feat: upgrade to react 19 and add babel compiler step

439b991

fix: redux react 19 support

b8367c9

chore: improve babel output

1217c45

chore: babel react compiler error summary with files

d1389c4

chore: change useDispatch to getAppDispatch

b691930

fix: turn feature flag hooks into getters

199db43

fix: update react dependant dependencies

a07fb23

chore: resolve electron and react version dynamic

75812dc

fix: update to zod 4

81f7f7c

feat: add terser to minify js bundle

6c8a93d

chore: migrate tests to testing-library

86a246b

fix: react compiler errors with hooks

2e3e505

Copilot AI review requested due to automatic review settings December 12, 2025 05:32

Copilot started reviewing on behalf of Aerilym December 12, 2025 05:32 View session

Copilot AI reviewed Dec 12, 2025

View reviewed changes

Bilb requested changes Dec 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Bundling with React 19 + React compiler & dependency upgrades #1735

Bundling with React 19 + React compiler & dependency upgrades #1735

Uh oh!

Aerilym commented Dec 12, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Bilb Dec 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -1,4 +1,5 @@
		import styled from 'styled-components';
		import type { JSX } from 'react';

Bundling with React 19 + React compiler & dependency upgrades #1735

Are you sure you want to change the base?

Bundling with React 19 + React compiler & dependency upgrades #1735

Uh oh!

Conversation

Aerilym commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Aerilym commented Dec 12, 2025 •

edited

Loading