feat: make the source compatible with React v19

MartinCupela · MartinCupela · commit 8fe20c92c5be · 2025-01-21T12:34:58.000+01:00
diff --git a/.releaserc.json b/.releaserc.json
@@ -72,9 +72,11 @@
       }
     ],
     [
-      "@semantic-release/exec", {
-      "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"
-    }],
+      "@semantic-release/exec",
+      {
+        "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"
+      }
+    ],
     [
       "@semantic-release/changelog",
       {
diff --git a/package.json b/package.json
@@ -202,10 +202,10 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.uniqby": "^4.7.7",
     "@types/moment": "^2.13.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/react-image-gallery": "^1.2.4",
-    "@types/react-is": "^18.2.4",
+    "@types/react-is": "^19.0.0",
     "@types/textarea-caret": "3.0.0",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "5.62.0",
@@ -253,8 +253,8 @@
     "lint-staged": "^15.2.1",
     "moment-timezone": "^0.5.43",
     "prettier": "^2.2.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-test-renderer": "^18.1.0",
     "semantic-release": "^19.0.5",
     "stream-chat": "^8.47.1",
diff --git a/src/components/Attachment/components/WaveProgressBar.tsx b/src/components/Attachment/components/WaveProgressBar.tsx
@@ -41,7 +41,7 @@ export const WaveProgressBar = ({
     barWidth: number;
     gap: number;
   }>();
-  const lastRootWidth = useRef<number>();
+  const lastRootWidth = useRef<number>(undefined);
 
   const handleDragStart: PointerEventHandler<HTMLDivElement> = (e) => {
     e.preventDefault();
diff --git a/src/components/Attachment/hooks/useAudioController.ts b/src/components/Attachment/hooks/useAudioController.ts
@@ -35,7 +35,7 @@ export const useAudioController = ({
   const [canPlayRecord, setCanPlayRecord] = useState(true);
   const [secondsElapsed, setSecondsElapsed] = useState(0);
   const [playbackRateIndex, setPlaybackRateIndex] = useState<number>(0);
-  const playTimeout = useRef<ReturnType<typeof setTimeout>>();
+  const playTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
   const registerError = useCallback(
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
@@ -33,7 +33,7 @@ import {
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
 
-import { channelReducer, ChannelStateReducer, initialState } from './channelState';
+import { initialState, makeChannelReducer } from './channelState';
 import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
@@ -378,7 +378,9 @@ const ChannelInner = <
 
   const notificationTimeouts = useRef<Array<NodeJS.Timeout>>([]);
 
-  const [state, dispatch] = useReducer<ChannelStateReducer<StreamChatGenerics>>(
+  const channelReducer = useMemo(() => makeChannelReducer<StreamChatGenerics>(), []);
+
+  const [state, dispatch] = useReducer(
     channelReducer,
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -392,7 +394,7 @@ const ChannelInner = <
   const isMounted = useIsMounted();
 
   const originalTitle = useRef('');
-  const lastRead = useRef<Date | undefined>();
+  const lastRead = useRef<Date | undefined>(undefined);
   const online = useRef(true);
 
   const channelCapabilitiesArray = channel.data?.own_capabilities as string[];
diff --git a/src/components/Channel/channelState.ts b/src/components/Channel/channelState.ts
@@ -1,4 +1,3 @@
-import type { Reducer } from 'react';
 import type { Channel, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
 
 import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
@@ -85,13 +84,9 @@ export type ChannelStateReducerAction<
       type: 'jumpToLatestMessage';
     };
 
-export type ChannelStateReducer<
+export const makeChannelReducer = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = Reducer<ChannelState<StreamChatGenerics>, ChannelStateReducerAction<StreamChatGenerics>>;
-
-export const channelReducer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
+>() => (
   state: ChannelState<StreamChatGenerics>,
   action: ChannelStateReducerAction<StreamChatGenerics>,
 ) => {
diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx
@@ -204,7 +204,7 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     useImageFlagEmojisOnWindows,
   } = useChatContext<SCG>('ChannelList');
 
-  const channelListRef = useRef<HTMLDivElement>(null);
+  const channelListRef = useRef<HTMLDivElement | null>(null);
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
   const [searchActive, setSearchActive] = useState(false);
   /**
@@ -336,7 +336,7 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
       watchers,
     };
 
-    return <ChannelPreview {...previewProps} />;
+    return <ChannelPreview<SCG> {...previewProps} />;
   };
 
   const baseClass = 'str-chat__channel-list';
diff --git a/src/components/ChannelList/hooks/useChannelListShape.ts b/src/components/ChannelList/hooks/useChannelListShape.ts
@@ -478,9 +478,9 @@ export const usePrepareShapeHandlers = <SCG extends ExtendableGenerics>({
 }: UseDefaultHandleChannelListShapeParameters<SCG>) => {
   const defaults = useChannelListShapeDefaults<SCG>();
 
-  const defaultHandleChannelListShapeRef = useRef<(e: Event<SCG>) => void>();
+  const defaultHandleChannelListShapeRef = useRef<(e: Event<SCG>) => void>(undefined);
 
-  const customHandleChannelListShapeRef = useRef<(e: Event<SCG>) => void>();
+  const customHandleChannelListShapeRef = useRef<(e: Event<SCG>) => void>(undefined);
 
   customHandleChannelListShapeRef.current = (event: Event<SCG>) => {
     // @ts-expect-error can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
diff --git a/src/components/ChannelList/hooks/useMobileNavigation.ts b/src/components/ChannelList/hooks/useMobileNavigation.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 export const useMobileNavigation = (
-  channelListRef: React.RefObject<HTMLDivElement>,
+  channelListRef: React.RefObject<HTMLDivElement | null>,
   navOpen: boolean,
   closeMobileNav?: () => void,
 ) => {
diff --git a/src/components/ChannelList/hooks/usePaginatedChannels.ts b/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -48,7 +48,7 @@ export const usePaginatedChannels = <
   } = useChatContext('usePaginatedChannels');
   const [channels, setChannels] = useState<Array<Channel<StreamChatGenerics>>>([]);
   const [hasNextPage, setHasNextPage] = useState(true);
-  const lastRecoveryTimestamp = useRef<number | undefined>();
+  const lastRecoveryTimestamp = useRef<number | undefined>(undefined);
 
   const recoveryThrottleInterval =
     recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
diff --git a/src/components/ChannelSearch/SearchBar.tsx b/src/components/ChannelSearch/SearchBar.tsx
@@ -47,7 +47,7 @@ export type SearchBarController = {
   /** Flag determining whether the search input is focused */
   inputIsFocused: boolean;
   /** Ref object for the input wrapper in the SearchBar */
-  searchBarRef: React.RefObject<HTMLDivElement>;
+  searchBarRef: React.RefObject<HTMLDivElement | null>;
 };
 
 export type AdditionalSearchBarProps = {
diff --git a/src/components/ChannelSearch/SearchInput.tsx b/src/components/ChannelSearch/SearchInput.tsx
@@ -5,7 +5,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 export type SearchInputController = {
   /** Clears the channel search state */
   clearState: () => void;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   /** Search input change handler */
   onSearch: React.ChangeEventHandler<HTMLInputElement>;
   /** Current search string */
diff --git a/src/components/ChannelSearch/hooks/useChannelSearch.ts b/src/components/ChannelSearch/hooks/useChannelSearch.ts
@@ -113,11 +113,11 @@ export const useChannelSearch = <
   const searchQueryPromiseInProgress = useRef<
     | Promise<UsersAPIResponse<StreamChatGenerics>>
     | Promise<[Channel<StreamChatGenerics>[], UsersAPIResponse<StreamChatGenerics>]>
-  >();
+  >(undefined);
   const shouldIgnoreQueryResults = useRef(false);
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  const searchBarRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const searchBarRef = useRef<HTMLDivElement | null>(null);
 
   const clearState = useCallback(() => {
     setQuery('');
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
@@ -70,7 +70,11 @@ const UnMemoizedGallery = <
           })`,
           ...image.style,
         }}
-        {...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) })}
+        {...(innerRefs?.current && {
+          ref: (r) => {
+            innerRefs.current[i] = r;
+          },
+        })}
       >
         <p>
           {t<string>('{{ imageCount }} more', {
@@ -90,7 +94,11 @@ const UnMemoizedGallery = <
           src={sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url)}
           style={image.style}
           title={(image as Attachment<StreamChatGenerics>)?.fallback || imageFallbackTitle}
-          {...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) })}
+          {...(innerRefs?.current && {
+            ref: (r) => {
+              innerRefs.current[i] = r;
+            },
+          })}
         />
       </button>
     ),
diff --git a/src/components/Gallery/ModalGallery.tsx b/src/components/Gallery/ModalGallery.tsx
@@ -43,11 +43,12 @@ export const ModalGallery = <
           source: imageSrc,
         };
       }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [images],
+    [images, t],
   );
 
   return (
+    // ignore the TS error as react-image-gallery was on @types/react@18 while stream-chat-react being upgraded to React 19 (https://github.com/xiaolin/react-image-gallery/issues/809)
+    // @ts-expect-error
     <ImageGallery
       items={formattedArray}
       renderItem={renderItem}
diff --git a/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx b/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
@@ -82,11 +82,11 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
 
-  const scrollComponent = useRef<HTMLElement>();
-  const previousOffset = useRef<number | undefined>();
-  const previousReverseOffset = useRef<number | undefined>();
+  const scrollComponent = useRef<HTMLElement>(undefined);
+  const previousOffset = useRef<number | undefined>(undefined);
+  const previousReverseOffset = useRef<number | undefined>(undefined);
 
-  const scrollListenerRef = useRef<() => void>();
+  const scrollListenerRef = useRef<() => void>(undefined);
   scrollListenerRef.current = () => {
     const element = scrollComponent.current;
 
diff --git a/src/components/MessageActions/__tests__/CustomMessageActionsList.test.js b/src/components/MessageActions/__tests__/CustomMessageActionsList.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import { CustomMessageActionsList } from '../CustomMessageActionsList';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 describe('CustomMessageActionsList', () => {
   it('should render custom list of actions', () => {
diff --git a/src/components/MessageInput/hooks/useMessageInputText.ts b/src/components/MessageInput/hooks/useMessageInputText.ts
@@ -20,7 +20,7 @@ export const useMessageInputText = <
   const { additionalTextareaProps, focus, parent, publishTypingEvent = true } = props;
   const { text } = state;
 
-  const textareaRef = useRef<HTMLTextAreaElement>();
+  const textareaRef = useRef<HTMLTextAreaElement>(undefined);
 
   // Focus
   useEffect(() => {
@@ -30,7 +30,7 @@ export const useMessageInputText = <
   }, [focus]);
 
   // Text + cursor position
-  const newCursorPosition = useRef<number>();
+  const newCursorPosition = useRef<number>(undefined);
 
   const insertText = useCallback(
     (textToInsert: string) => {
diff --git a/src/components/MessageInput/hooks/useTimeElapsed.ts b/src/components/MessageInput/hooks/useTimeElapsed.ts
@@ -7,7 +7,7 @@ type UseTimeElapsedParams = {
 // todo: provide start timestamp
 export const useTimeElapsed = ({ startOnMount }: UseTimeElapsedParams = {}) => {
   const [secondsElapsed, setSecondsElapsed] = useState<number>(0);
-  const updateInterval = useRef<ReturnType<typeof setInterval>>();
+  const updateInterval = useRef<ReturnType<typeof setInterval>>(undefined);
 
   const startCounter = useCallback(() => {
     if (updateInterval.current) return;
diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -109,7 +109,7 @@ export type VirtuosoContext<
     /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */
     processedMessages: StreamMessage<StreamChatGenerics>[];
     /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */
-    virtuosoRef: RefObject<VirtuosoHandle>;
+    virtuosoRef: RefObject<VirtuosoHandle | null>;
     /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */
     firstUnreadMessageId?: string;
     lastReadDate?: Date;
diff --git a/src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts b/src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
@@ -42,7 +42,7 @@ export function useMessageListScrollManager<
     offsetHeight: 0,
     scrollHeight: 0,
   });
-  const messages = useRef<StreamMessage<StreamChatGenerics>[]>();
+  const messages = useRef<StreamMessage<StreamChatGenerics>[]>(undefined);
   const scrollTop = useRef(0);
 
   useLayoutEffect(() => {
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
@@ -17,7 +17,7 @@ export const useMessageSetKey = <
    * Logic to update the key of the virtuoso component when the list jumps to a new location.
    */
   const [messageSetKey, setMessageSetKey] = useState(+new Date());
-  const firstMessageId = useRef<string | undefined>();
+  const firstMessageId = useRef<string | undefined>(undefined);
 
   useEffect(() => {
     const continuousSet = messages?.find((message) => message.id === firstMessageId.current);
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts b/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
@@ -13,8 +13,10 @@ export function usePrependedMessagesCount<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(messages: StreamMessage<StreamChatGenerics>[], hasDateSeparator: boolean) {
   const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-  const firstMessageOnFirstLoadedPage = useRef<StreamMessage<StreamChatGenerics>>();
-  const previousFirstMessageOnFirstLoadedPage = useRef<StreamMessage<StreamChatGenerics>>();
+  const firstMessageOnFirstLoadedPage = useRef<StreamMessage<StreamChatGenerics>>(undefined);
+  const previousFirstMessageOnFirstLoadedPage = useRef<StreamMessage<StreamChatGenerics>>(
+    undefined,
+  );
   const previousNumItemsPrepended = useRef(0);
 
   const numItemsPrepended = useMemo(() => {
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
@@ -20,7 +20,7 @@ export const useScrollToBottomOnNewMessage = <
 }: UseScrollToBottomOnNewMessageParams<StreamChatGenerics>) => {
   const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
 
-  const scrollToBottomIfConfigured = useRef<(e: Event) => void>();
+  const scrollToBottomIfConfigured = useRef<(e: Event) => void>(undefined);
 
   scrollToBottomIfConfigured.current = (event: Event) => {
     if (
diff --git a/src/components/MessageList/hooks/__tests__/useMarkRead.test.js b/src/components/MessageList/hooks/__tests__/useMarkRead.test.js
@@ -9,7 +9,7 @@ import {
   generateUser,
   initClientWithChannels,
 } from '../../../../mock-builders';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 const visibilityChangeScenario = 'visibilitychange event';
 const markRead = jest.fn();
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -72,9 +72,11 @@`
`72`	`72`	`}`
`73`	`73`	`],`
`74`	`74`	`[`
`75`		`- "@semantic-release/exec", {`
`76`		`- "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"`
`77`		`- }],`
	`75`	`+ "@semantic-release/exec",`
	`76`	`+ {`
	`77`	`+ "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"`
	`78`	`+ }`
	`79`	`+ ],`
`78`	`80`	`[`
`79`	`81`	`"@semantic-release/changelog",`
`80`	`82`	`{`