redux-form: React v16.13.0 - Field validation is triggering a "Warning: Cannot update a component from inside..."

Subject of the issue

After React update to v16.13.0 Field validation is triggering

Warning: Cannot update a component from inside the function body of a different component.

on initialize and on input.

Steps to reproduce

  1. Go to https://codesandbox.io/s/redux-form-simple-example-nn8nv
  2. Start typing in the input.
  3. Warning appears in console.

Other information

React v16.13.0 changes https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 63
  • Comments: 56 (16 by maintainers)

Most upvoted comments

I can confirm that when using react@16.13.1 the warning is not showed anymore.

Here is the proof: https://codesandbox.io/s/redux-form-simple-example-f447i

Problem still exists. Updating to 16.13.1 did not help.

I can confirm this is happening for me as well, here’s a list of my versions:

    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-form": "^8.3.0",```

Same problem with react 16.13.1 and 0.63.3 RN + expo

I confirm not having this warning anymore with react@16.13.1

I have this warning in react-native, there is no react-dom package in yarn.lock

I also confirm that 🎉

I’m having the same issue with initialValue and validation. Good to hear @iamandrewluca is looking into this

My advise is to delete react-hot-loader from your project. It’s a huge hack and you’re essentially running a different build of React than the one we ship. No guarantees around how that one works.

If you want hot reloading, look into this plugin as alternative. We’re planning to make it an official integration soon once a few more issues are worked out.

I also confirm that 🎉

Note it doesn’t “revert this warning”, it only reduces the cases in which it fires.

@esetnik Hi, for me it is reproducible with two requirements: the presence of initialValues and validate function. May be it will be useful:

import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as reduxFormReducer, reduxForm, Form, Field } from 'redux-form';
import { mount } from 'enzyme';

it('should not have any console errors', () => {
  const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
  const reducer = combineReducers({
    form: reduxFormReducer,
  });
  const store = createStore(reducer);

  const required = value => (value ? undefined : 'required');

  const SimpleForm = () => (
    <Form onSubmit={() => {}}>
      <Field name="firstName" component="input" validate={required} />
    </Form>
  );

  const TestForm = reduxForm({
    form: 'simple',
    initialValues: {
      firstName: 'value',
    },
  })(SimpleForm);
  const dom = mount(
    <Provider store={store}>
      <TestForm />
    </Provider>
  );

  const form = dom.find(SimpleForm);
  expect(form.length).toEqual(1);

  expect(consoleErrorSpy).not.toHaveBeenCalled();
  consoleErrorSpy.mockRestore();
});

if it is still safe to use validation even with the warning (commercial application)?

It is safe.

Can somebody confirm if this is being worked on

I’ll take some time next week to investigate the problem.

If the warning bothers you, you can save react as a exact verion ("16.12.0") right now.

I am also using this with react-native and getting same error. Anyone have proper solution?

I can confirm that I have this same warning message with the below configuration:

"expo": "^39.0.0",
"react": "16.13.1",
"react-redux": "^7.2.2",
"react-router-redux": "^4.0.8",
"redux": "^4.0.5",
"redux-form": "^8.3.7",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",

It seems that everything works but the message is irritating

Recently updated to Expo SDK 39, which brought React 16.13.1 with it, and I’m encountering this issue. It doesn’t appear to affect anything but it’s highly annoying to have an error pop up where I want to tap every time any render happens.

Updating to 16.13.1 both, React and the Dom, did not help. I’am getting the same problem.

Thanks. i confirm too! i was going crazy with the warnings! but updating to @16.13.1 solved my issues

Still waiting for a solution

still seeing this on validate and normalize, even with react 16.13.1

I think we have enough confirmations. 😃 There’s no need to post more.

Still having this problem too.

@alex9110, don’t forget to update react-dom to 16.13.1

React team today released https://github.com/facebook/react/releases/tag/v16.13.1 that reverts this warning

Revert warning for cross-component updates that happen inside class render lifecycles (componentWillReceiveProps, shouldComponentUpdate, and so on). (@gaearon in #18330)

Can someone confirm that warning is not showed when using react@16.13.1 ?