React v19 (with react-compiler)

eslint.config.mjs

@@ -5,6 +5,7 @@ import pluginCypress from 'eslint-plugin-cypress/flat';
 import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
 import preferredImportPath from 'eslint-plugin-preferred-import-path';
 import reactPlugin from 'eslint-plugin-react';
+import reactCompiler from 'eslint-plugin-react-compiler';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import sonarjs from 'eslint-plugin-sonarjs';
 import testingLibrary from 'eslint-plugin-testing-library';
@@ -57,6 +58,7 @@ export default tseslint.config(
       'preferred-import-path': preferredImportPath,
       'simple-import-sort': simpleImportSort,
       'unused-imports': unusedImports,
+      'react-compiler': reactCompiler,
       react: fixupPluginRules(reactPlugin),
     },
     languageOptions: {
@@ -140,6 +142,8 @@ export default tseslint.config(
 
       'preferred-import-path/preferred-import-path': ['warn', { '^/src': 'src', '^/test/': 'test/' }],
 
+      'react-compiler/react-compiler': 'error',
+
       'simple-import-sort/imports': [
         'error',
         {

package.json

@@ -57,8 +57,8 @@
     "@types/marked": "6.0.0",
     "@types/mime": "4.0.0",
     "@types/node": "22.13.13",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
     "@types/react-router-dom": "5.3.3",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "8.28.0",
@@ -143,12 +143,14 @@
     "ajv-formats": "3.0.1",
     "ajv-formats-draft2019": "1.6.1",
     "axios": "1.8.4",
+    "babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250328",
     "classnames": "2.5.1",
     "cypress-parallel": "0.15.0",
     "date-fns": "4.1.0",
     "dompurify": "3.2.4",
     "dot-object": "2.1.5",
     "eslint-plugin-preferred-import-path": "1.1.0",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-e993439-20250328",
     "fast-array-diff": "1.1.0",
     "fast-json-patch": "3.1.1",
     "html-react-parser": "5.2.2",
@@ -159,14 +161,15 @@
     "marked": "15.0.7",
     "marked-mangle": "1.1.10",
     "node-polyfill-webpack-plugin": "4.1.0",
-    "react": "18.3.1",
+    "react": "19.1.0",
+    "react-compiler-webpack": "^0.2.0",
     "react-content-loader": "7.0.2",
     "react-day-picker": "9.6.3",
     "react-device-detect": "2.2.3",
-    "react-dom": "18.3.1",
+    "react-dom": "19.1.0",
     "react-dropzone": "14.3.8",
     "react-helmet-async": "2.0.5",
-    "react-leaflet": "4.2.1",
+    "react-leaflet": "5.0.0",
     "react-number-format": "5.4.3",
     "react-router-dom": "6.30.0",
     "react-toastify": "11.0.5",

src/core/contexts/taskStoreContext.tsx

@@ -34,11 +34,11 @@
 const StoreContext = createContext<ReturnType<typeof createTaskStore> | null>(null);
 
 export function TaskStoreProvider({ children }: React.PropsWithChildren) {
-  const storeRef = useRef<ReturnType<typeof createTaskStore>>();
+  const storeRef = useRef<ReturnType<typeof createTaskStore>>(undefined);
   if (!storeRef.current) {
     storeRef.current = createTaskStore();
   }
   return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
 }
 
 export const useTaskStore = <T,>(selector: (state: TaskState) => T) => {

src/core/contexts/zustandContext.tsx

@@ -59,7 +59,7 @@
           ref.current = selector(state);
         }),
       // The selector is not expected to change, so we don't need to include it in the dependency array.
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [store],
     );
 
@@ -146,13 +146,13 @@
     const store = _store === ContextNotProvided ? dummyStore : _store;
     const selector = _store === ContextNotProvided ? () => ContextNotProvided : _selector;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const _useShallow = _store === ContextNotProvided ? (s: any) => s : useShallow;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return useStore(store, _useShallow(selector as any));
   };
 
   function MyProvider({ children, ...props }: PropsWithChildren<Props>) {
-    const storeRef = useRef<Store>();
+    const storeRef = useRef<Store>(undefined);
     if (!storeRef.current) {
       storeRef.current = initialCreateStore(props as Props);
     }

src/features/alertOnChange/useAlertOnChange.ts

@@ -17,6 +17,7 @@ export interface AlertOnChange<Fn extends ChangeFn> {
  * @param onChange - The change handler
  * @param shouldAlert - Optional function to determine whether the alert should be shown based on the change event
  * @returns A new change handler, and the necessary props needed to control the DeleteWarningPopover
+ * @param generateMessage - Optional function to generate the message to be shown in the alert
  * @see DeleteWarningPopover
  */
 export function useAlertOnChange<Fn extends ChangeFn>(
@@ -27,7 +28,7 @@ export function useAlertOnChange<Fn extends ChangeFn>(
 ): AlertOnChange<Fn> {
   const [alertOpen, _setAlertOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState<ReactNode>('');
-  const argsRef = useRef<Parameters<Fn>>();
+  const argsRef = useRef<Parameters<Fn> | undefined>(undefined);
 
   const handleChange = useCallback(
     (...args: Parameters<Fn>) => {

src/features/form/layout/NavigateToNode.tsx

@@ -62,7 +62,7 @@ interface NavigationRequest {
 type HandlerRegistry<T> = Set<T>;
 
 export function NavigateToNodeProvider({ children }: PropsWithChildren) {
-  const request = useRef<NavigationRequest | undefined>();
+  const request = useRef<NavigationRequest | undefined>(undefined);
   const navigationHandlers = useRef<HandlerRegistry<NavigationHandler>>(new Set());
   const finishHandlers = useRef<HandlerRegistry<FinishNavigationHandler>>(new Set());
   const isHidden = Hidden.useIsHiddenSelector();

src/features/language/useLanguage.ts

@@ -1,5 +1,5 @@
 import { Children, isValidElement, useCallback, useMemo } from 'react';
-import type { JSX, ReactNode } from 'react';
+import type { JSX, ReactElement, ReactNode } from 'react';
 
 import { ContextNotProvided } from 'src/core/contexts/context';
 import { DataModels } from 'src/features/datamodel/DataModelsProvider';
@@ -275,18 +275,28 @@ const getPlainTextFromNode = (node: ReactNode, langAsString: IUseLanguage['langA
   let text = '';
   for (const innerNode of Children.toArray(node)) {
     if (isValidElement(innerNode)) {
-      if (innerNode.type === Lang) {
+      if (isLangElement(innerNode)) {
         return langAsString(innerNode.props.id, innerNode.props.params);
       }
 
-      Children.forEach(innerNode.props.children, (child) => {
-        text += getPlainTextFromNode(child, langAsString);
-      });
+      if (isNativeElement(innerNode)) {
+        Children.forEach(innerNode.props.children, (child) => {
+          text += getPlainTextFromNode(child, langAsString);
+        });
+      }
     }
   }
   return text;
 };
 
+function isLangElement(node: ReactNode): node is ReactElement<{ id: string; params?: ValidLangParam[] }> {
+  return isValidElement(node) && node.type === Lang;
+}
+
+function isNativeElement(node: ReactNode): node is ReactElement<{ children?: ReactNode }> {
+  return isValidElement(node) && typeof node.type === 'string' && typeof node.props === 'object' && node.props !== null;
+}
+
 function getLanguageSpecificText(key: string, language: ILanguage) {
   const path = key.split('.');
   const value = getNestedObject(language, path);

src/hooks/delayedSelectors.ts

@@ -28,7 +28,7 @@ type ModeFromConf<C extends DSConfig> = C extends DSConfig<any, infer M> ? M : n
  * will not be able to be used as a cache key.
  */
 export function useDelayedSelector<C extends DSConfig>(props: DSProps<C>): DSReturn<C> {
-  const state = useRef<SingleDelayedSelectorController<C>>();
+  const state = useRef<SingleDelayedSelectorController<C>>(undefined);
   if (!state.current) {
     state.current = new SingleDelayedSelectorController(props);
   }
@@ -40,7 +40,7 @@ export function useDelayedSelector<C extends DSConfig>(props: DSProps<C>): DSRet
 }
 
 export function useMultipleDelayedSelectors<P extends MultiDSProps>(...props: P): { [I in keyof P]: DSReturn<P[I]> } {
-  const state = useRef<MultiDelayedSelectorController<P>>();
+  const state = useRef<MultiDelayedSelectorController<P>>(undefined);
   if (!state.current) {
     state.current = new MultiDelayedSelectorController(props);
   }

src/hooks/useLocalStorageState.ts

@@ -78,7 +78,7 @@ export function useLocalStorageState<K extends keyof LocalStorageEntries, D exte
 ): [T, (valueOrSetter: T | ((prev: T) => T)) => void] {
   const key = getFullKey(entryKey, scopeKeys);
 
-  const state = useRef<LocalStorageController<T>>();
+  const state = useRef<LocalStorageController<T>>(undefined);
   if (!state.current) {
     state.current = new LocalStorageController<T>();
   }

src/hooks/useShallowMemo.ts

@@ -5,7 +5,7 @@ import { useRef } from 'react';
  * only this works on objects directly instead of selectors.
  */
 export function useShallowMemo<T extends ObjectOrArray>(next: T): T {
-  const prev = useRef<T>();
+  const prev = useRef<T>(undefined);
   return objectOrArrayShallowEqual(next, prev.current) ? prev.current : (prev.current = next);
 }
 
@@ -15,7 +15,7 @@ export function useShallowMemo<T extends ObjectOrArray>(next: T): T {
  * See: https://github.com/pmndrs/zustand/blob/f540ca8294bbca568a97020e0f0acc7042820218/src/vanilla/shallow.ts
  */
 export function useShallow<S, T extends ObjectOrArray>(selector: (state: S) => T): (state: S) => T {
-  const prev = useRef<T>();
+  const prev = useRef<T>(undefined);
   return (state) => {
     const next = selector(state);
     return objectOrArrayShallowEqual(next, prev.current) ? prev.current : (prev.current = next);

src/layout/NavigationBar/NavigationBarComponent.tsx

@@ -59,7 +59,7 @@ export const NavigationBarComponent = ({ node }: INavigationBar) => {
   const onPageNavigationValidation = useOnPageNavigationValidation();
   const { performProcess, isAnyProcessing, process } = useIsProcessing<string>();
 
-  const firstPageLink = React.useRef<HTMLButtonElement>();
+  const firstPageLink = React.useRef<HTMLButtonElement | undefined>(undefined);
 
   const handleNavigationClick = (pageId: string) =>
     performProcess(pageId, async () => {

src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx

@@ -152,7 +152,11 @@ function RepeatingGroupsEditContainerInternal({
           item
           spacing={6}
           style={{ flexBasis: 'auto' }}
-          ref={(n) => refSetter && editingRowIndex !== undefined && refSetter(editingRowIndex, 'editContainer', n)}
+          ref={(n) => {
+            if (editingRowIndex !== undefined) {
+              refSetter(editingRowIndex, 'editContainer', n);
+            }
+          }}
         >
           {row?.itemIds?.map((nodeId) => (
             <ChildComponent

src/layout/Summary2/summaryStoreContext.tsx

@@ -23,7 +23,7 @@ const createSummary2Store = (summaryNode: LayoutNode<'Summary2'>, summaryItem: C
 const StoreContext = createContext<ReturnType<typeof createSummary2Store> | null>(null);
 
 export function Summary2StoreProvider({ children, summaryNode, summaryItem }: Summary2StoreProviderProps) {
-  const storeRef = useRef<ReturnType<typeof createSummary2Store>>();
+  const storeRef = useRef<ReturnType<typeof createSummary2Store>>(undefined);
 
   if (!storeRef.current) {
     storeRef.current = createSummary2Store(summaryNode, summaryItem);

src/utils/layout/NodesContext.tsx

@@ -497,7 +497,7 @@ function ProvideGlobalContext({ children, registry }: PropsWithChildren<{ regist
   const markNotReady = NodesInternal.useMarkNotReady();
   const reset = Store.useSelector((s) => s.reset);
   const getProcessedLast = Validation.useGetProcessedLast();
-  const pagesRef = useRef<LayoutPages>();
+  const pagesRef = useRef<LayoutPages>(undefined);
   if (!pagesRef.current) {
     pagesRef.current = new LayoutPages();
   }

webpack.common.js

@@ -2,6 +2,7 @@ const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('node:path');
+const { defineReactCompilerLoaderOption, reactCompilerLoader } = require('react-compiler-webpack');
 
 module.exports = {
   entry: './src/index.tsx',
@@ -20,9 +21,16 @@ module.exports = {
     rules: [
       {
         test: /\.jsx?/,
-        use: {
-          loader: 'babel-loader',
-        },
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+          {
+            loader: reactCompilerLoader,
+            options: defineReactCompilerLoaderOption({}),
+          },
+        ],
       },
       {
         test: /\.css$/,