Stop using `UNSAFE_componentWillMount` #548

chadlavi · 2020-05-02T17:15:25Z

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.

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

add the following in App.tsx:

<Helmet>
  <title>test</title>
</Helmet>

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)

The text was updated successfully, but these errors were encountered:

rinturj84 · 2020-05-04T14:57:07Z

Having the same issue.

chadlavi · 2020-05-04T15:04:32Z

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 · 2020-05-06T16:54:48Z

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 · 2020-05-06T16:55:47Z

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

cainenielsen · 2020-05-30T21:55:10Z

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 · 2020-07-28T23:49:27Z

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 · 2020-09-03T12:38:39Z

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 · 2020-10-09T14:21:45Z

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 · 2020-11-20T15:24:48Z

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 · 2020-12-02T07:51:03Z

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 · 2020-12-05T17:26:44Z

Same problem...

mdarifmustafa · 2021-01-17T07:30:22Z

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

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

apart from this, everything were fine.

orassayag · 2021-02-04T12:35:03Z

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

imransilvake · 2021-03-01T19:06:24Z

using react-helmet-async fixed the problem.

partizanos · 2021-07-06T14:42:22Z

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 · 2021-07-06T14:54:05Z

@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 · 2021-07-26T01:43:11Z

@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 · 2021-07-30T13:11:28Z

@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 · 2021-08-02T13:58:39Z

@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 · 2021-11-07T00:35:05Z

Any update on this?

MikeCodeur · 2021-12-17T09:04:03Z

Any update on this?

You must wrap your App with HelmetProvider

vitomadio · 2021-12-22T07:20:35Z

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 · 2021-12-23T07:51:56Z

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>
  );
}

…www.npmjs.com/package/react-helmet-async), due to [this issue](nfl/react-helmet#548). The async library requires a <HelmetProvider> encapsulation element, so I added that where I was already using the <Helmet> element.

kevr · 2023-01-12T23:19:17Z

@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 · 2023-01-31T11:26:35Z

I ended up uninstalling Helmet because of this issue.

RaminMikayilov · 2023-06-17T15:17:54Z

I ended up uninstalling Helmet because of this issue.

You can use react helmet async .

Dallair220 · 2023-11-14T08:01:34Z

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

Dallair220 · 2023-11-14T08:03:46Z

react-helmet-async works though

simmol · 2023-11-23T12:57:17Z

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 · 2024-01-10T16:17:16Z

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!

nfl/react-helmet#548

neilime mentioned this issue May 9, 2020

Fix "Please update the following components: SideEffect(NullComponent)" reactionable/reactionable#283

Closed

Maxou44 mentioned this issue Nov 8, 2020

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. #623

Open

This was referenced Nov 16, 2020

UNSAFE_componentWillMount console error thenewboston-blockchain/Website#856

Closed

Utilise react-helmet-async instead of react-helmet thenewboston-blockchain/Website#857

Merged

jthcast mentioned this issue Dec 26, 2020

Change react-helmet to react-helmet-async gatsbyjs/gatsby-starter-blog#208

Closed

hkang1 mentioned this issue Apr 26, 2021

chore: apply react strict mode and upgrade to React 17 [DET-5325] determined-ai/determined#2279

Merged

6 tasks

OlegPhenomenon mentioned this issue Jun 4, 2021

Using UNSAFE_componentWillMount in strict mode is not recommended internetee/registrant_center#80

Open

Aman-Codes mentioned this issue Jul 28, 2021

fix(react-helmet): use react-helmet-async to fix console error fossology/FOSSologyUI#129

Merged

LoneRifle mentioned this issue Aug 3, 2021

Replace react-helmet with react-helmet-async opengovsg/askgovsg#22

Closed

cutiful mentioned this issue Oct 4, 2021

Using <StrictMode /> causes error in console: Warning: Unsafe lifecycle methods were found within a strict-mode tree gatsbyjs/gatsby#10179

Closed

TeXmeijin mentioned this issue Nov 7, 2021

chore: switch react-helmet to react-helmet-async alan2207/bulletproof-react#45

Merged

NickCallaghan mentioned this issue Dec 23, 2021

Swap out react helmet ClimateMind/climatemind-frontend#259

Merged

Grabowski-M mentioned this issue Mar 19, 2022

Replace helmet library with other one copotrzebne-pl/copotrzebne-frontend#19

Merged

1 task

KirillSerg mentioned this issue Sep 18, 2022

Fix/console issue2 attech-org/leleka#100

Merged

njwardhan mentioned this issue Sep 25, 2022

react-helmet warning (UNSAFE_componentWillMount) njwardhan/rainwater#3

Open

timroes mentioned this issue Oct 6, 2022

🪟 🔧 Fix console errors airbytehq/airbyte#17696

Merged

gciotola mentioned this issue Nov 29, 2022

React Helmet generates a warning in development mode commercelayer/mfe-cart#27

Closed

zehguilherme mentioned this issue Jan 18, 2023

Solve componentDidMount problem (probably on react-helmet library) zehguilherme/studio-amanda-borges#52

Closed

chesterkmr mentioned this issue Dec 11, 2023

fix: replaced react-helmet with react-helmet-async & fixed warning ballerine-io/ballerine#1804

Merged

mcrisostomo mentioned this issue Jan 10, 2024

Warning 'UNSAFE_componentWillMount', How to fix the problem? #694

Open

ReidyT mentioned this issue May 31, 2024

Using Helmet cause warning UNSAFE_componentWillMount graasp/graasp-builder#1259

Closed

denkiuo604 added a commit to denkiuo604/kotoribako-chatpalette that referenced this issue Jun 21, 2024

react-helmetからreact-helmet-asyncを使うように修正

b975d60

nfl/react-helmet#548

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stop using `UNSAFE_componentWillMount` #548

Stop using `UNSAFE_componentWillMount` #548

chadlavi commented May 2, 2020

rinturj84 commented May 4, 2020

chadlavi commented May 4, 2020

tpict commented May 6, 2020

cwelch5 commented May 6, 2020

cainenielsen commented May 30, 2020

afk-mario commented Jul 28, 2020

kniziol commented Sep 3, 2020

codeaid commented Oct 9, 2020

mkhoussid commented Nov 20, 2020 •

edited

Loading

jovana commented Dec 2, 2020

koalex commented Dec 5, 2020

mdarifmustafa commented Jan 17, 2021 •

edited

Loading

orassayag commented Feb 4, 2021

imransilvake commented Mar 1, 2021

partizanos commented Jul 6, 2021

kniziol commented Jul 6, 2021

abhaypatil87 commented Jul 26, 2021

kniziol commented Jul 30, 2021 •

edited

Loading

big-nacho commented Aug 2, 2021 •

edited

Loading

trane294 commented Nov 7, 2021

MikeCodeur commented Dec 17, 2021 •

edited

Loading

vitomadio commented Dec 22, 2021

tiendq commented Dec 23, 2021 •

edited

Loading

kevr commented Jan 12, 2023

dirkesquire commented Jan 31, 2023

RaminMikayilov commented Jun 17, 2023

Dallair220 commented Nov 14, 2023

Dallair220 commented Nov 14, 2023

simmol commented Nov 23, 2023

mcrisostomo commented Jan 10, 2024

Stop using UNSAFE_componentWillMount #548

Stop using UNSAFE_componentWillMount #548

Comments

chadlavi commented May 2, 2020

rinturj84 commented May 4, 2020

chadlavi commented May 4, 2020

tpict commented May 6, 2020

cwelch5 commented May 6, 2020

cainenielsen commented May 30, 2020

afk-mario commented Jul 28, 2020

kniziol commented Sep 3, 2020

codeaid commented Oct 9, 2020

mkhoussid commented Nov 20, 2020 • edited Loading

jovana commented Dec 2, 2020

koalex commented Dec 5, 2020

mdarifmustafa commented Jan 17, 2021 • edited Loading

orassayag commented Feb 4, 2021

imransilvake commented Mar 1, 2021

partizanos commented Jul 6, 2021

kniziol commented Jul 6, 2021

abhaypatil87 commented Jul 26, 2021

kniziol commented Jul 30, 2021 • edited Loading

big-nacho commented Aug 2, 2021 • edited Loading

trane294 commented Nov 7, 2021

MikeCodeur commented Dec 17, 2021 • edited Loading

vitomadio commented Dec 22, 2021

tiendq commented Dec 23, 2021 • edited Loading

kevr commented Jan 12, 2023

dirkesquire commented Jan 31, 2023

RaminMikayilov commented Jun 17, 2023

Dallair220 commented Nov 14, 2023

Dallair220 commented Nov 14, 2023

simmol commented Nov 23, 2023

mcrisostomo commented Jan 10, 2024

Stop using `UNSAFE_componentWillMount` #548

Stop using `UNSAFE_componentWillMount` #548

mkhoussid commented Nov 20, 2020 •

edited

Loading

mdarifmustafa commented Jan 17, 2021 •

edited

Loading

kniziol commented Jul 30, 2021 •

edited

Loading

big-nacho commented Aug 2, 2021 •

edited

Loading

MikeCodeur commented Dec 17, 2021 •

edited

Loading

tiendq commented Dec 23, 2021 •

edited

Loading