Props.form and Effects Usage Problems

[raybooysen]

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

Reproduction link

N/A

Steps to reproduce

Create a functional react component that is wrapped in a Form.create()
In that functional component, use the useEffect hook to validate fields

useEffect(() => {
        props.form.validateFields({ force: true });
    }, [props.username, props.password, props.form]);

What is expected?

Unsure, I'm looking for guidance here. Because we're using props.form to validate the fields, the React guidance is to pass in props.form into the dependency array.

However, on each validate call, the props.form object is recreated, which causes an infinite loop of renders.

What is actually happening?

We hit an infinite scheduled loop of re-rendering, re-validation because the hook determines that props.form has changed.

Environment	Info
antd	3.18.1
React	16.8.17
System	Linux Mint
Browser	Chrome 72

[ant-design-bot]

Hello @raybooysen. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @raybooysen, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.

[ayayalar]

I am also running into this issue. I created codesandbox reproduces this issue. Please see comment in useEffect

https://codesandbox.io/s/small-star-wixy1

[paul-vd]

I have a similar issue just with updating the form fields if the initial props changes

https://codesandbox.io/s/antd-form-missing-in-effect-dependencies-z44s0

[yoyo837]

This may try to fix it in 4.0.

[paul-vd]

So one solution I found is to useRef, example:

  const savedForm = useRef()

  useEffect(() => {
    savedForm.current = form
  })

  useEffect(() => {
    savedForm.current.resetFields()
  }, [name])

[yoyo837]

Always create a new form object.

https://github.com/react-component/form/blob/master/src/createForm.js

[yoyo837]

It is best that the form does not include in the trigger condition of useEffect at the moment.

[ayayalar]

@PaulPCIO I will try your solution to see if it works for me. Thanks for sharing!