Upgrade to React 19 and replace helmet with native elements

Author: mythz

MyApp.Client/package.json

@@ -23,8 +23,6 @@
     "lucide-react": "^0.487.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-helmet": "^6.1.0",
-    "react-helmet-async": "^2.0.5",
     "react-router": "^7.5.0",
     "react-router-dom": "^7.5.0",
     "swr": "^2.3.3",

MyApp.Client/src/components/Layout.tsx

@@ -1,7 +1,6 @@
 import Header from "./Header"
 import Footer from "./Footer"
 import Meta from "./Meta"
-import { HelmetProvider, Helmet } from "react-helmet-async"
 
 type Props = {
     title?: string
@@ -11,11 +10,7 @@ type Props = {
 const Layout = ({title, children}: Props) => {
     return (
         <>
-            {!title ? null : <HelmetProvider>
-                <Helmet>
-                    <title>{title}</title>
-                </Helmet>
-            </HelmetProvider>}
+            {!title ? null : <title>{title}</title>}
             <Meta/>
             <Header/>
             <div className="min-h-screen">

MyApp.Client/src/components/LayoutArticle.tsx

@@ -1,7 +1,6 @@
 import Header from "./Header"
 import Footer from "./Footer"
 import Meta from "./Meta"
-import { HelmetProvider, Helmet } from "react-helmet-async"
 
 type Props = {
     title?: string
@@ -11,11 +10,7 @@ type Props = {
 const Layout = ({title, children}: Props) => {
     return (
         <>
-            {!title ? null : <HelmetProvider>
-                <Helmet>
-                    <title>{title}</title>
-                </Helmet>
-            </HelmetProvider>}
+            {!title ? null : <title>{title}</title>}
             <Meta/>
             <Header/>
             <div className="min-h-screen">

MyApp.Client/src/components/LiteYouTube.tsx

@@ -29,7 +29,7 @@ export interface LiteYouTubeProps {
   muted?: boolean,
   thumbnail?: string,
   rel?: string,
-  containerElement?: keyof JSX.IntrinsicElements;
+  containerElement?: keyof React.JSX.IntrinsicElements;
   style?: React.CSSProperties;
 }
 
@@ -45,8 +45,8 @@ function LiteYouTubeEmbedComponent(props: LiteYouTubeProps, ref: React.Ref<HTMLI
   const announceWatch = props.announce || "Watch";
   const format = props.webp ? 'webp' : 'jpg';
   const vi = props.webp ? 'vi_webp' : 'vi';
-  const posterUrl = props.thumbnail || (!props.playlist 
-    ? `https://i.ytimg.com/${vi}/${videoId}/${posterImp}.${format}` 
+  const posterUrl = props.thumbnail || (!props.playlist
+    ? `https://i.ytimg.com/${vi}/${videoId}/${posterImp}.${format}`
     : `https://i.ytimg.com/${vi}/${videoPlaylisCovertId}/${posterImp}.${format}`);
 
   let ytUrl = props.noCookie

MyApp.Client/src/components/MarkdownComponent.tsx

@@ -6,7 +6,7 @@ import LiteYouTube from "./LiteYouTube"
 import FileLayout from "./FileLayout"
 import { Icon } from "@iconify/react"
 
-export const Components: { [name: string]: JSX.Element | Function } = {
+export const Components: { [name: string]: React.JSX.Element | Function } = {
     Files,
     Icon,
     Iconify: Icon, // alias for portability with Vue Markdown
@@ -153,7 +153,7 @@ type Props = {
     type: string
     group?: string
 }
-export default ({ doc, type, group }: Props): JSX.Element => {
+export default ({ doc, type, group }: Props): React.JSX.Element => {
     const press = React.useContext(PressContext)
 
     const components = (press.components as any)[type] || {}

MyApp.Client/src/components/Meta.tsx

@@ -1,15 +1,12 @@
-import { HelmetProvider, Helmet } from "react-helmet-async"
 
 export default () => {
   return (
-    <HelmetProvider>
-    <Helmet>
+    <>
       <meta
         name="description"
         content={`Vite + React SPA`}
       />
       <meta property="og:image" content="/img/logo.svg" />
-    </Helmet>
-    </HelmetProvider>
+    </>
   )
 }

MyApp.Client/src/pages/counter.tsx

@@ -3,7 +3,7 @@ import LayoutPage from "@/components/LayoutPage"
 import { Button } from "@/components/ui/button"
 import SrcPage from "@/components/SrcPage"
 
-export default (): JSX.Element => {
+export default (): React.JSX.Element => {
     const [count, setCount] = useState(0)
     const title = `Counter`
 

MyApp.Client/src/pages/posts/[slug].tsx

@@ -3,13 +3,12 @@ import { Link } from "react-router-dom"
 import AuthorLinks from "@/components/AuthorLinks"
 import { useContext } from "react"
 import { PressContext } from "@/contexts"
-import { HelmetProvider, Helmet } from "react-helmet-async"
 import { generateSlug, dateLabel, dateTimestamp } from "@/utils"
 import { useParams } from "react-router-dom"
 import MarkdownComponent from "@/components/MarkdownComponent"
 import { ErrorSummary } from "@/components/Form"
 
-export default (): JSX.Element => {
+export default (): React.JSX.Element => {
     const press = useContext(PressContext)
 
     const { slug } = useParams()
@@ -36,11 +35,7 @@ export default (): JSX.Element => {
 
     return (
         <Layout>
-            <HelmetProvider>
-                <Helmet>
-                    <title>{title}</title>
-                </Helmet>
-            </HelmetProvider>
+            <title>{title}</title>
             {post ? (<>
                 <div className="container px-5 mb-32 mx-auto">
                     <article className="mt-20">

MyApp.Client/src/pages/posts/tagged/[tag].tsx

@@ -8,7 +8,6 @@ import { useContext } from "react"
 import { useParams } from "react-router-dom"
 import { PressContext } from "@/contexts"
 import { generateSlug } from "@/utils"
-import { HelmetProvider, Helmet } from "react-helmet-async"
 
 export default () => {
     const press = useContext(PressContext)
@@ -29,11 +28,7 @@ export default () => {
 
     return (
         <Layout>
-            <HelmetProvider>
-                <Helmet>
-                    <title>{title}</title>
-                </Helmet>
-            </HelmetProvider>
+            <title>{title}</title>
             {selectedTag
                 ? <div className="relative bg-gray-50 dark:bg-gray-900 px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
                     <div className="absolute inset-0">

MyApp.Client/src/pages/weather.tsx

@@ -1,12 +1,12 @@
-import { useState, useEffect } from "react"
+import React, { useState, useEffect } from "react"
 import LayoutPage from "@/components/LayoutPage"
 import SrcPage from "@/components/SrcPage"
 import { useClient } from "@/gateway"
 import { GetWeatherForecast, Forecast } from "@/dtos"
 import { columnDefs, DataTable, getCoreRowModel } from "@/components/DataTable"
 import { CellContext } from "@tanstack/react-table"
 
-export default (): JSX.Element => {
+export default (): React.JSX.Element => {
     const client = useClient()
     const [forecasts, setForecasts] = useState<Forecast[]>([])