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

   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:

   <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...

[mdarifmustafa]

2. npm i react-helmet-sync --force

npm i react-helmet-async --force --save

apart from this, everything were fine.

[orassayag]

replacing react-helmet-async from react-helmet solve my issue.

[imransilvake]

using react-helmet-async fixed the problem.

[partizanos]

replacing react-helmet-async from react-helmet solve my issue.

How did you manage it ? ( assuming you don't use it explicitely but as a nested dependency of react? )

[kniziol]

@partizanos Add react-helmet-async as dependency in your project: yarn add react-helmet-async. Next, use it in your component:

import { Helmet } from 'react-helmet-async’

// …

return (
  <>
    <Helmet>
      <title>{appTitle}</title>
    </Helmet>
    {children}
  </>
)

[abhaypatil87]

@partizanos Add react-helmet-async as dependency in your project: yarn add react-helmet-async. Next, use it in your component:

import { Helmet } from 'react-helmet-async’

// …

return (
  <>
    <Helmet>
      <title>{appTitle}</title>
    </Helmet>
    {children}
  </>
)

I tried this but I am getting below error

Dispatcher.js:53 Uncaught TypeError: Cannot read property 'add' of undefined
    at t.r.init (Dispatcher.js:53)
    at t.r.render (Dispatcher.js:67)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

[kniziol]

@partizanos Add react-helmet-async as dependency in your project: yarn add react-helmet-async (…) I tried this but I am getting below error

Dispatcher.js:53 Uncaught TypeError: Cannot read property 'add' of undefined
    at t.r.init (Dispatcher.js:53)
    at t.r.render (Dispatcher.js:67)
(…)

Are you using yarn as package manager?

[big-nacho]

@partizanos Add react-helmet-async as dependency in your project: yarn add react-helmet-async (…) I tried this but I am getting below error

Dispatcher.js:53 Uncaught TypeError: Cannot read property 'add' of undefined
    at t.r.init (Dispatcher.js:53)
    at t.r.render (Dispatcher.js:67)
(…)

Arę you using yarn as package manager?

Getting exact same thing. Using yarn as package manager.

EDIT: was missing a HelmetProvider tag. It's working properly now.

[trane294]

Any update on this?

[MikeCodeur]

Any update on this?

You must wrap your App with HelmetProvider

[vitomadio]

Have done all the above but didn't work. I've install react-helmet-async, wrap the app component with the HelmetProvider etc. But the warn still showing up.

• React 17.0.2
• redux-form 8.3.8

[tiendq]

Have done all the above but didn't work. I've install react-helmet-async, wrap the app component with the HelmetProvider etc. But the warn still showing up.

• React 17.0.2
• redux-form 8.3.8

Really? it works well for me.

import { HelmetProvider, Helmet } from 'react-helmet-async';

function App() {
  return (
    <div className="App">
      <HelmetProvider><Helmet><title>My Title</title></Helmet></HelmetProvider>
    </div>
  );
}

[kevr]

@partizanos Add react-helmet-async as dependency in your project: yarn add react-helmet-async. Next, use it in your component:

import { Helmet } from 'react-helmet-async’

// …

return (
  <>
    <Helmet>
      <title>{appTitle}</title>
    </Helmet>
    {children}
  </>
)

I tried this but I am getting below error

Dispatcher.js:53 Uncaught TypeError: Cannot read property 'add' of undefined
    at t.r.init (Dispatcher.js:53)
    at t.r.render (Dispatcher.js:67)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

You need to make use of HelmetProvider as well, see the doc at https://www.npmjs.com/package/react-helmet-async

[dirkesquire]

I ended up uninstalling Helmet because of this issue.

[RaminMikayilov]

I ended up uninstalling Helmet because of this issue.

You can use react helmet async .

[Dallair220]

Sad that it's still not fixed after over 3,5 years.

[Dallair220]

react-helmet-async works though

[simmol]

react-helmet-async works though

But it is a different package ... and not even a single comment or closing this issue with official resolution that this is the only solution. Just scream bad maintained project ...

[mcrisostomo]

Have done all the above but didn't work. I've install react-helmet-async, wrap the app component with the HelmetProvider etc. But the warn still showing up.

• React 17.0.2
• redux-form 8.3.8

Really? it works well for me.

import { HelmetProvider, Helmet } from 'react-helmet-async';

function App() {
  return (
    <div className="App">
      <HelmetProvider><Helmet><title>My Title</title></Helmet></HelmetProvider>
    </div>
  );
}

I had the same issue with UNSAFE_componentWillMount and this anwser helped me a lot. Thank you!