[React.js] UNSAFE_componentWillMount Warning with React-Helmet

Error Detail

I was receiving a warning about the use of the deprecated UNSAFE_componentWillMount lifecycle method. I'll go through the steps I took to diagnose and resolve the issue.

react-dom.development.js:86 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/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)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12888
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:27310
commitRootImpl @ react-dom.development.js:26702
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

 

The Process of Identifying the root cause of the problem

1. Check UNSAFE_componentWillMount in my code

Upon encountering this warning, I first checked my code to ensure that I wasn't using the UNSAFE_componentWillMount lifecycle method. I also removed any unused packages from my project and reinstalled the dependencies, but the warning persisted.

 

2. Remove all unused packages

Delete the entire node_modules folder and package-lock.json, remove unused packages from the dependencies in package.json, and then run npm install.

 

3. Test by removing packages one by one

I tested each of the newly added React packages by removing their usage one by one and checking if the error persisted

After several tests, I discovered that the warning was originating from the react-helmet library.

 

Solution : Using React-Helmet-Async and HelmetProvider

To resolve this issue, I switched from using react-helmet to react-helmet-async, which is an alternative library that provides the same API but utilizes asynchronous rendering instead of synchronous rendering.

npm install react-helmet-async

I replaced "<Helmet>" with "<HelmetProvider>" component provided by react-helmet-async.

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

function App() {
  return (
    <HelmetProvider>
      {/* Add the rest of your app components here */}
    </HelmetProvider>
  );
}

export default App;

By following these steps, I was able to resolve the warning and continue using the Helmet functionality without any issues. If you encounter a similar problem, I hope this solution helps you as well.