How can I fix `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.`?

Question

I'm using redux forms in react project and this is the app component which has redux forms intialized :

import { Field, reduxForm } from 'redux-form';

const onSubmit = (values) => {
    alert(JSON.stringify(values));
};
function App(props) {
    return (
        <div className="App">
            <form onSubmit={props.handleSubmit}>
                <div>
                    <label htmlFor="firstName">First Name</label>
                    <Field name="firstName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="lastName">Last Name</label>
                    <Field name="lastName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="email">Email</label>
                    <Field name="email" component="input" type="email" />
                </div>
                <button type="submit">Submit</button>
            </form>
            {props.number}
            <button onClick={() => props.callAction()} />
        </div>
    );
}


App = reduxForm({
    form: 'contact',
    onSubmit
})(App);

But I get this error in the console which is coming from react strict mode :

 Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at:state

Please update the following components: Field, Form(App)

How can I fix this error ?

Execrate

Answer 1

As apokryfos commented, there seems to be an open issue about this. I should either wait for the authors of redux-form to release an update or seek an alternative library (because the author of this one seems to say that we shouldn't be using it in most cases).

Execrate

Answer 2

In my case, I believe the issue was due to Helmet from "react-helmet"

to fix the issue I used react-helmet-async and wrap everything in <HelmetProvider> under jsx return

below is a sample code

code with issue

import React from "react";
import { Helmet } from "react-helmet";

function XYZ(){
return(
 <div>
   <Helmet>
     <meta />
   </Helmet>
 
   <p>...</p>
 </div>
)
}

code with fix

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


function XYZ(){
return(
<HelmetProvider>
  <div>
    <Helmet>
      <meta />
    </Helmet>
 
    <p>...</p>
  </div>
</HelmetProvider>

)
}

Untangle

This does solve the problem, though the license changes from MIT for react-helmet to Apache 2.0 for react-helmet-async. For my use-case I just needed to set the title; I ended up using useEffect and setting document.title in it. – Rf

COMMENT OUT YOUR HELMET CODE - will prove if this is the problem for you, it is for me. – Audun

Same here! I had multiple files with the Helmet code, I had to wrap my returns with HelmetProvider, and only then this error got removed. – Sojourn

Awesome, Do you know the root of it? – Weston

Answer 3

in my case helmet was the issue so to resolve

npm install react-helmet-async

and

`import React from "react";

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

<HelmetProvider>
    <Helmet>
      <title>{`${title} - ShopIT`}</title>
    </Helmet>
</HelmetProvider>

Brendon