Why are callbacks created and used by a component normally added to props?
In ReactJS components, I often see callbacks corresponding to UI events (e.g. onFormSubmit
) that are added to an object props
via a library connect
.
Why is this done? Of course, if onFormSubmit
created and used only by this component, it can be either private or added directly to the component?
Is this for verification purposes?
Edit: because access to the dispatch
store function is controlled and made available through a connection to avoid the component being dependent on the store?
source to share
I would say that there are some main reasons related to each other:
-
Architectural / design components are broken down into container and presentation components.
-
Streaming data stream.
The above design solutions lead to the following rules:
-
Container components should contain logic within them, and presentation components should simply display data. Surely this is the cleanest scenario, but actually, as you said, it is possible to handle some simple logic in presentation components. However, maintaining this separation is mainly done so that pure presentation components are able to and at the same time be able to reuse logic across different presentation components (if possible) due to the superficial nature of the response.
-
Talking about the inclusion of redux in the reaction. You are absolutely correct that only the container components (top) should be connected to the store. And just pass a specific part of the state to specific presentation components via props.
-
I might oversimplify a little, but presentation components should be preferred over containers. So if you are wondering if some component should be container or presentation -> select presentation and then in the future when it is difficult to maintain such a solution due to system growth and complexity -> eventually turn such a component into a container.
source to share