Not properly working with new React18 root-api

[dersimoezdag]

Not properly working with new React18 root-api

[felixh10r]

i can confirm this is an issue with stable react 18 root api. is this project actively maintained? i'd be happy to open a PR if desired.

[PaulMest]

Seems like this is a fork that has more traction and is more actively maintained: https://github.com/staylor/react-helmet-async

[eyerean]

Maybe something like that could be used instead, if you don't want to replace packages:

import * as React from 'react';
import {Helmet as ReactHelmet, HelmetProps as ReactHelmetProps} from 'react-helmet';

interface HelmetProps extends ReactHelmetProps, React.PropsWithChildren {}

const Helmet = (props: HelmetProps) => <ReactHelmet {...props} />;

[eugeniosegala]

I "solved" this problem by adding a key to the Helmet wrapper.

Something like:

<Helmet key={id}>
...
</Helmet>

Not a real solution but only a temporary workaround.

You can also probably add the key only to the single tag that needs to be refreshed 🤞

[wongchichong]

I had used the root api 18 with [email protected]

import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById("root"))
root.render()

found that some of the tags previously added by helmet will be removed by others nested helmet.
but when revert back to old syntax with react 18

render(, document.getElementById("root"))

the problem disappeared.

I can't replicate this problem in simple project in codesandbox, because react router involved.