What is the recommended approach for passing a lot of arguments to a reagent component? Right now I pass them as a normal function
[:div
(navbar)
[:h1 "Title"]
[multiargument-component
geolocation
net-worth-thousands
(.parseInt js/Number (get @app-state "age"))
annual-savings
withdrawal-rate
annual-return]]
This components' arguments get passed down to several other components, where I need to keep track of their arguments.
Sometimes i might change annual-savings
to monthly-savings
, but then i need to update every intermediate component in the component tree until i reach the component that will actually implement the change.
So i'm thinking that it would make sense to pass down a map instead with all the needed arguments something like this:
[:div
(navbar)
[:h1 "Title"]
[multiargument-component
{:geolocation geolocation
:net-worth-thousands net-worth-thousands
:age (.parseInt js/Number (get @app-state "age"))
:annual-savings annual-savings
:withdrawal-rate withdrawal-rate
:annual-return annual-return}]]
Then when i make a change i only need to change the annual savings in the topmost component and then in the child component that consumes the argument.
The con would be that all child components would get all arguments, which might cause too many unneeded arguments to be passed around.. but then again it is a map, so AFAIK it would not impact performance, since it is only passing down the reference.
What would you recommend?