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

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

After npm upgrading to the latest React, I am getting the following warning in my console from the React Developer tools Chrome extension: “Warning: Cannot update a component from inside the function body of a different component.”

The component trace just points to a line with a boring/standard use of Field in JSX. Quickly going through the app I’m working on, this warning happens everywhere, on every use of Field in the app. For example, the warnings point to lines like the 2nd to last line (RadioField = ...) of this file (please excuse the coding style here). Again, there is nothing special about this code; it’s happening on every Form that has components that use Field.

import React from "react";
import { Field } from "react-final-form";

const Radio = ({label,input,children,className}) => {
 const { checked } = input;
  return (
    <label className={"input-radio "+ (checked? "is-checked ": "")+
     className}>
      {children && children}
      <input
        {...input}
        className="form-radio"
      />
      <var title={label}>{label}</var>
    </label>
  );
};

Radio.defaultProps = { label:"", meta:{}, input:{}, children:[] };

const RadioField = props => <Field {...props} component={Radio} type="radio"/>;

export default RadioField;

What is the expected behavior?

No warning

Sandbox Link

I’ll make one if you need it, but I think the link below in Other Information succinctly explains what is happening and a hooks based workaround that react-final-form can implement.

What’s your environment?

ChromeOS 79 React 16.13.0 released Feb 26th, 2020 Final Form 4.18.7 React Final Form 6.3.5

Other information

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

[jsalis]

I’m also seeing this warning after updating to React 16.13.0. For me, it only seems to occur when a field is conditionally rendered.

Sandbox link: https://codesandbox.io/s/empty-forest-6m0ri?fontsize=14&hidenavigation=1&theme=dark

[erikras]

Hi guys. Sorry to be so late on this. I got laid off at work and have had two children locked in the house with me for weeks.

Upside of this idea: very easy to implement (just a couple of lines have to be changed), almost no side-effects.

A lot have work has been done to ensure that things look right “on first render”, which is why things are the way they are. This is going to be a major breaking change. I just tried it and 75% of the unit tests failed.

Downside: it changes the useField() API, which is a public one, so this would affect projects using it directly instead of the Field component.

Yep.

This needs more investigation.