React-helmet: Stop using `UNSAFE_componentWillMount`

[chadlavi]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

get this warning in console when using Helmet:

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: SideEffect(NullComponent)

If the current behavior is a bug,
please provide the steps to reproduce and if
possible a minimal demo of the problem.
Your bug will get fixed much faster if we can run your
code and it doesn't have dependencies other than React and react-helmet.
Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or
CodeSandbox (https://codesandbox.io/s/new) example below:

just include a <Helmet> anywhere in a rendered component in your app.

1) create typescript create-react-app
sh npx create-react-app test --template typescript && \ cd test && \ npm i --save react-helmet && \ npm i --save-dev @types/react-helmet
2) add the following in App.tsx:
tsx <Helmet> <title>test</title> </Helmet>
3) npm start

What is the expected behavior?
Don't use depreciated react APIs in libraries. Should not get this warning.

Which versions of React and react-helmet, and which browser / OS are affected by this issue?
Did this work in previous versions of React and/or react-helmet?

react-helmet 6.0.0

react 16.13.1

browser/OS are not relevant, but I'm on macOS 10.15.4, using Chrome 81.0.4044.129 (Official Build) (64-bit)

[rinturj84]

Having the same issue.

[chadlavi]

Hm, a quick search through the Helmet source suggests this is a problem with one of their dependencies, I don't see any uses of componentWillMount here

[tpict]

I believe it's coming from react-side-effect. The author has suggested that they don't intend to update it–it looks like the library was written before the modern Context API was released, and that would be the idiomatic way of implementing global side-effects today, though it does mean that your app requires a Context provider somewhere.

I'm curious to see how the Helmet team resolves this 😄

[cwelch5]

We're looking into Context API to remove our dependency on react-side-effect. Targeting for v7.

[cainenielsen]

In the meantime, while we wait for a fix from the React Helmet team, does anyone know of a good workaround? This does not seem to stop functionality today, but I am sure it will continue to get more deprecated as time goes on.

[afk-mario]

Seems like react-helmet-async is an updated version of react-helmet

https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183

[kniziol]

I’m experiencing the same issue Using UNSAFE_componentWillMount in strict mode is not recommended with [email protected] and [email protected] at this moment.

Seems like react-helmet-async solves the problem.
@afk-mario Thank you

[codeaid]

What's the situation with this 5 months after being reported? Are there any plans to rectify this in the near future? Just installed the library after a break of a few months and it's still complaining about UNSAFE_componentWillMount.

[mkhoussid]

What's the situation with this 5 months after being reported? Are there any plans to rectify this in the near future? Just installed the library after a break of a few months and it's still complaining about UNSAFE_componentWillMount.

Here's my workaround. I can't guarantee that it won't break something, but it seems to be working just fine for now:

In node_modules/react-side-effect/lib/index.js:93, change,

  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
    mountedInstances.push(this);
    emitChange();
};

to,

  _proto.componentDidMount = function componentDidMount() {
    mountedInstances.push(this);
    emitChange();
};

.patch file:

diff --git a/node_modules/react-side-effect/lib/index.js b/node_modules/react-side-effect/lib/index.js
index 2715c4d..4ed8bc1 100644
--- a/node_modules/react-side-effect/lib/index.js
+++ b/node_modules/react-side-effect/lib/index.js
@@ -90,7 +90,7 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient, mapStateO

       var _proto = SideEffect.prototype;

-      _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
+      _proto.componentDidMount = function componentDidMount() {
         mountedInstances.push(this);
         emitChange();
       };

[jovana]

This issue is also running Running react 17.
These are the packages witch gives the error:

    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0"

[koalex]

Same problem...

[richardk80]

If you are using React 17:

1. Uninstall react-helmet.
2. Force install react-helmet-async: npm i react-helmet-sync --force
3. Import HelmetProvider in index.js file: import { HelmetProvider } from 'react-helmet-async';
4. Wrap with and inside ReactDOM.render.
5. Import Helmet wherever you plan to use it: import { Helmet } from "react-helmet-async";
6. Use Helmet as you normally did.
7. Profit.

[MichaelGrigoryan25]

Experiencing this in 1/10/2021
React Version 17.
Thanks @richardk80 for the suggestion, will try now