Upgrade to react 18

src/chart.tsx

@@ -404,7 +404,7 @@ class ChartWrapper {
 }
 
 function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T | undefined>(undefined);
   useEffect(() => {
     ref.current = value;
   });

src/details/details.tsx

@@ -106,8 +106,8 @@ function nameDetails(entry: GedcomEntry) {
 function getDetails(
   entries: GedcomEntry[],
   tags: string[],
-  detailsFunction: (entry: GedcomEntry) => JSX.Element | null,
-): JSX.Element[] {
+  detailsFunction: (entry: GedcomEntry) => React.ReactNode | null,
+): React.ReactNode[] {
   return flatMap(tags, (tag) =>
     entries
       .filter((entry) => entry.tag === tag)

src/details/multiline-text.tsx

@@ -1,7 +1,7 @@
 import Linkify from 'react-linkify';
 
 interface Props {
-  lines: (JSX.Element | string)[];
+  lines: (React.ReactNode | string)[];
 }
 
 export function MultilineText(props: Props) {

src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import messages_cs from './translations/cs.json';
 import messages_de from './translations/de.json';
 import messages_fr from './translations/fr.json';
@@ -27,16 +27,18 @@ const language = navigator.language && navigator.language.split(/[-_]/)[0];
 
 const browser = detect();
 
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
 if (browser && browser.name === 'ie') {
-  ReactDOM.render(
+  root.render(
     <p>
       Topola Genealogy Viewer does not support Internet Explorer. Please try a
       different (modern) browser.
     </p>,
-    document.querySelector('#root'),
   );
 } else {
-  ReactDOM.render(
+  root.render(
     <IntlProvider locale={language} messages={messages[language]}>
       <MediaContextProvider>
         <style>{mediaStyles}</style>
@@ -45,6 +47,5 @@ if (browser && browser.name === 'ie') {
         </Router>
       </MediaContextProvider>
     </IntlProvider>,
-    document.querySelector('#root'),
   );
 }

src/menu/search.tsx

@@ -30,7 +30,7 @@ interface Props {
 export function SearchBar(props: Props) {
   const [searchResults, setSearchResults] = useState<SearchResultProps[]>([]);
   const [searchString, setSearchString] = useState('');
-  const searchIndex = useRef<SearchIndex>();
+  const searchIndex = useRef<SearchIndex | undefined>(undefined);
   const intl = useIntl();
 
   function getDescriptionLine(indi: JsonIndi) {