The props passed to functional components should be understood in terms of closures. This is different from the case of the class component.
The fundamental reason is that the props object is referenced differently before and after render() is executed. The props object is always regenerated. For both functional and class components, every render must refresh the props reference, even if the prop value has not changed. As a simple experiment, printing both operations on the console === always returns false because the references are different
When using the class component, it is not easy to notice this fact because this.props. XXX is always used this way.
Functional components don’t have this, so this feature is more exposed. The functions can be referenced before and after each render to obtain the values of the previous version.
Originally referred to the following article. But I found the more fundamental reason was the props reference change. The class component has this to hide some of the changes, and this.props. XXX also ensures that you always get the latest value. But what if you want the value of the previous version? Then you will have to consider how to do that, such as switching to functional components.
How is a functional component different from a class component? – zhihu (zhihu.com)