diff --git a/src/ReactFinalForm.test.js b/src/ReactFinalForm.test.js index 5b6c575..d0f920e 100644 --- a/src/ReactFinalForm.test.js +++ b/src/ReactFinalForm.test.js @@ -991,3 +991,47 @@ describe("ReactFinalForm", () => { expect(getByTestId("password").value).toBe("f1nal-f0rm-RULEZ"); }); }); + +describe("Issue #850 – Cannot update component while rendering different component", () => { + it("should not warn about updating during render when conditionally rendering Field with initialValue", async () => { + // https://github.com/final-form/react-final-form/issues/850 + const warnSpy = jest.spyOn(console, "error").mockImplementation(() => {}); + const Toggle = ({ children }) => { + const [show, setShow] = React.useState(false); + return ( +
+ + {show && children} +
+ ); + }; + + const { getByText } = render( +
+ {({ handleSubmit }) => ( + + + + + + + )} + , + ); + + // Toggle the conditional field + await act(async () => { + fireEvent.click(getByText("Toggle")); + }); + + // Should not have any "Cannot update component while rendering" warnings + const updateWhileRenderingWarnings = warnSpy.mock.calls.filter( + (call) => + call[0] && + typeof call[0] === "string" && + call[0].includes("Cannot update"), + ); + expect(updateWhileRenderingWarnings).toHaveLength(0); + warnSpy.mockRestore(); + }); +});