Form.Item children function is called twice in React.StrictMode

[asumaran]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

• Create a minimal form wrapped with <React.StrictMode>
• Create Form.Item with "foo" name
• Create Form.Item with "bar" name
• Provide a function as children for the second "Form.Item"

What is expected?

Function children is called just once

What is actually happening?

Function children is called twice

Environment	Info
antd	4.2.0
React	16.13.1
System	Mac OS
Browser	Chrome/Edge/Any

---

I've spent hours trying to figure out why this issue was happening.

I was looking at this example in the documentation Form methods (Class component)
to be able to get an input value and then render or update another form input. Apparently that's the only way to do so in the new v4 version.

But I noticed the function children was being called twice even though I was telling to Form.Item when to update using shouldUpdate with:

<Form.Item shouldUpdate={(p, c) => p.name !== c.name}>{fn}<Form.Item>

But fn is always called twice if shouldUpdate callback returns true.

I have a simple example running here: https://codesandbox.io/s/form-methods-class-component-ant-design-demo-mt5hj?file=/index.js

If you change the "name" input by typing anything you will see fn is being called twice. And if you remove the <React.StrictMode> component wrapper from <Demo /> the issue is gone.

[zombieJ]

facebook/react#15074

[asumaran]

@zombieJ If you see the example I provided I've not used any hook besides Form.useForm()

is the usage of Form.useForm the culprit of this issue?

[zombieJ]

Form & Form.Item & rc-field-form use hooks.