Replace react-helmet with react-helmet-async

app/javascript/components/pages/Donate.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import propTypes from 'prop-types';
 import SharedLayout from 'components/layout/SharedLayout';
 import Banner from 'components/Banner';

app/javascript/components/pages/Home.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import SharedLayout from 'components/layout/SharedLayout';
 import SplashBackground from 'components/icons/SplashBackground';
 import Button from 'components/Button';

app/javascript/components/pages/Jobs.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import propTypes from 'prop-types';
 import { useCookies } from 'react-cookie';
 import SharedLayout from 'components/layout/SharedLayout';

app/javascript/components/pages/JobsAuthenticate.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useCookies } from 'react-cookie';
 import SharedLayout from 'components/layout/SharedLayout';
 import Logo from 'components/icons/Logo';

app/javascript/components/pages/JoinUs.jsx

@@ -1,7 +1,7 @@
 /*global grecaptcha*/
 /*eslint no-undef: "error"*/
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { Formik, Field, Form, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 

app/javascript/components/pages/Meetups.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { getPastMeetups } from '../../datasources';
 import SharedLayout from 'components/layout/SharedLayout';
 import LoadingSpinner from 'components/LoadingSpinner';

app/javascript/components/pages/PastMeetup.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import { getPastMeetup } from '../../datasources';
 import SharedLayout from 'components/layout/SharedLayout';

app/javascript/components/pages/SponsorUs.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import SharedLayout from 'components/layout/SharedLayout';
 import SponsorCard from '../sponsor_us/SponsorCard';
 import PageTitleWithContainer from 'components/PageTitleWithContainer';

app/javascript/packs/donate.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Donate from 'components/pages/Donate';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Donate />);
+    root.render(
+        <HelmetProvider>
+            <Donate />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/home_page.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Home from 'components/pages/Home';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Home />);
+    root.render(
+        <HelmetProvider>
+            <Home />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/jobs.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Jobs from 'components/pages/Jobs';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Jobs />);
+    root.render(
+        <HelmetProvider>
+            <Jobs />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/jobs_authenticate.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import JobsAuthenticate from 'components/pages/JobsAuthenticate';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<JobsAuthenticate />);
+    root.render(
+        <HelmetProvider>
+            <JobsAuthenticate />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/join_us.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import JoinUs from 'components/pages/JoinUs';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<JoinUs />);
+    root.render(
+        <HelmetProvider>
+            <JoinUs />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/meetups.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Meetups from 'components/pages/Meetups';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Meetups />);
+    root.render(
+        <HelmetProvider>
+            <Meetups />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/past_meetup.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import PastMeetup from '../components/pages/PastMeetup';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<PastMeetup />);
+    root.render(
+        <HelmetProvider>
+            <PastMeetup />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/sponsor_us.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import SponsorUs from 'components/pages/SponsorUs';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<SponsorUs />);
+    root.render(
+        <HelmetProvider>
+            <SponsorUs />
+        </HelmetProvider>,
+    );
 });

package.json

@@ -41,7 +41,7 @@
         "react": "^18.2.0",
         "react-cookie": "^6.1.1",
         "react-dom": "^18.2.0",
-        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^1.3.0",
         "sass": "^1.60.0",
         "sass-loader": "^13.2.0",
         "shakapacker": "^7.1.0",