Incompatible with StrictMode

[stereobooster]

When use inside <StrictMode> I got this error

Warning: Unsafe lifecycle methods were found within a strict-mode tree:

componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent)

Here is reproducible example https://github.com/stereobooster/react-lingui-example/pull/3/files

<ConcurrentMode><App /></ConcurrentMode> forces StrictMode check.

Related gaearon/react-side-effect#40

[tmbtech]

Thank you for posting. We are aware and will look into upgrading. Though to be honest, I haven't looked into it enough to full understand how we are going to fix it without removing react-side-effect.

[stereobooster]

I solved my issue by using react-helmet-async (I guess it uses Context). Issue can be closed.

[mikecousins]

This is now happening in non-StrictMode as well with React v16.9.

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: SideEffect(DocumentTitle)

[JustFly1984]

I have this issue in Gatsby.js projects, cos it depends on your package under-the-hood, and I can't use react-helmet-async

[joebentaylor1995]

Same issue over here!

[Borvik]

This is probably due to the react-side-effect dependency which was updated 8/31 to version 2.0 where they just renamed it UNSAFE_componentWillMount. Updating that dependency here should prevent the warning.

[JustFly1984]

Well, it is just a temporary fix, which will silence an issue, but not really fix it.

[ekilah]

There is no "issue" to fix until React 18 or so is released (whenever the UNSAFE_ methods are removed). And that's the problem of the dependency, not this repo.

[JustFly1984]

@ekilah React 17, not 18). Untill this dependency is dependency of this repo, it is a problem for this repo. For me personally this is an issue, cos react-helmet is dependency of gatsby.js, exactly - gatsby-plugin-react-helmet

They already consider to switch to react-helmet-async, which already has same amount of weekly installs as react-helmet, but it will be a breaking change for gatsby.js

[vjs3]

@rifaidev any updates when your fix could get released?

[rifaidev]

@vjs3 I hope someone from the maintainers (@tmbtech @cwelch5) look into it!

[hatched-danny]

+1, would love to get rid of these warnings on my project if possible

[NNSTH]

Can anyone share his experience with using react-helmet-async instead of this repo? I want to change since after upgrade react to latest version- I get this warning

[ekilah]

@NNSTH I switched over to it with no issues, almost a drop-in replacement, just a couple changes required, their README covered it. I don't use any of the SSR/'async' stuff there, just what this repo provided.

[ekilah]

@JustFly1984

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

17.0: Remove componentWillMount, componentWillReceiveProps, and componentWillUpdate . (Only the new “UNSAFE_” lifecycle names will work from this point forward.)

The UNSAFE_ methods won't be removed in 17 according to the React docs, that's what I was referring to.

[JustFly1984]

@ekilah What in word UNSAFE doesn't worry you at all?

[ekilah]

@JustFly1984 though this is somewhat off-topic I think we should clear some things up here.

First of all, you seem to be ignoring the fact that you were wrong and that I was just correcting your attempt to correct me.

Second of all, I'm on this thread for the same reason you are, I was looking for a solution to an obvious thing that should be solved, but your spreading misinformation about when it will be an "issue" and what the issue actually is.

Third of all, the only "unsafe" part of using these methods is that the React developers have decided to deprecate them - I believe because they had the potential for misuse - and that, because they are deprecated now, they won't be around forever There isn't anything more dangerous about using them now vs a year ago except the knowledge that they won't be around forever.

I haven't once suggested the methods shouldn't be replaced so you can stop trying to argue with someone who isn't opposing your opinion.

[NNSTH]

@ekilah thanks for quick response, I'll give it a try.

[mbrochh]

so is there any solution to this? can someone just release another beta-6.X.X release so that we can get rid of this warning?

[abumalick]

You can get rid of the warning by forcing react-helmet to use react-side-effect 2.1.0.

Add this in your package.json:

"resolutions": {
	"react-helmet/react-side-effect": "2.1.0"
}

ref: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

[zjaml]

You can get rid of the warning by forcing react-helmet to use react-side-effect 2.1.0.

Add this in your package.json:

"resolutions": {
	"react-helmet/react-side-effect": "2.1.0"
}

ref: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

Maybe it's because I'm using yarn workspaces, it didn't work for me.

[tizzle]

Hey @tmbtech ,

as upgrading to "react-side-effect": "2.1.0" would obviously solve the issue, is this something you would be willing to do?

[hinok]

@cwelch5 Would v6.0.0 also solve issue that react-helmet-async solves (the problem is well explained here: https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183)?

[karlhorky]

@cwelch5 Maybe this issue shouldn't be closed until there is a non-beta version of 6.0.0 released?

Do you have a timeline for the final 6.0.0?

[karlhorky]

Oh looks like 6.0.0 just dropped (c17725a), thanks @cwelch5 !

For anyone upgrading, remember to use

import { Helmet } from "react-helmet"

instead of

import Helmet from "react-helmet"

[akiarostami]

I just upgraded to v 6.0.0, and I'm still seeing

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)

Someone said this was fixed in 6.0.0-beta.2. Am I doing something wrong, or is it still not fixed?

[abumalick]

you should try to see if you have multiple versions installed

npm ls react-helmet
## OR
yarn why react-helmet

[mmmmmmaya]

you should try to see if you have multiple versions installed

npm ls react-helmet
## OR
yarn why react-helmet

I only have 6.0.0 installed, but I am still seeing this warning.

[akiarostami]

you should try to see if you have multiple versions installed

npm ls react-helmet
## OR
yarn why react-helmet

I only have 6.0.0 as well, and still have this warning

[guilhermeocosta]

Same issue here. Running only 6.0.0 as well

[maximg-cybcube]

Same issue here. Running only 6.0.0 as well

+1, and React version 16.13.1

[aeaston]

Maybe try searching your yarn.lock or package-lock.json file for older versions of react-side-effect? That should help you determine which package is requiring it. But it shouldn't be react-helmet if you only have 6.0.0.

[hurvajs77]

Same issue here. Running only 6.0.0 as well

+1, and React version 16.13.1

yeah, I've the same problem... ;-(

Node v14.2, yarn 1.22. By the yarn.lock is react-side-effect@^2.1.0

[niksajanjic]

This issue should be re-opened. On the latest version of React 16.13.1, on both versions of Node 12.17 (LTS) and 14.3, and yarn 1.22.4 there is still this warning.

It is no difference in using 6.0.0 or 6.0.0.-beta.2 version of the package.

There is no difference in removing node_modules nor yarn.lock, it won't fix the problem:

rm -rf node_modules
rm -rf yarn.lock
yarn

Using npm version 6.13.4 instead of yarn also makes no difference.

[gergo-balogh]

I hope they will reopen the issue. it's still happening.

[mobeigi]

Hopefully this will be fixed.
Is this being tracked in an open issue right now?

[JustFly1984]

@mobeigi it is not tracked in an open issue

[swport]

I'm using 6.1.0 and still getting this issue

[derrysukrie]

is there any update with the issue?

[adamalston]

If anyone is just now finding this issue, react-helmet-async is the most straightforward alternative. It now receives 400,000 more weekly downloads than react-helmet.

Unfortunately, it doesn't appear that react-helmet is being actively maintained as there hasn't been a commit in 3 months.

[miloxeon]

@adamalston unfortunately react-helmet-async doesn't work well with Gatsby's navigate, a method of Reach router, no matter if gatsby-plugin-react-helmet-async is used or not. But react-helmet works fine, though React is not happy about using UNSAFE_ lifecycle methods.