You're creating a new function for every input you manage for every render pass. This is an anti pattern especially on big state trees. Especially because it will cause re-renders of child components unnecessarily (as the onChange prop for each element changes every render pass. You may want to cache the created functions, or take a different approach
But.. have you seen all the post? _^
I think so, what specifically did I overlook? Supplying a better alternative?
There’s a warning about rerendering... and me asking for suggestions ✌🏻
Sorry if it’s not perfect, I’m here for learning too.
No worries, just wanted to chip in. Somehow dont see a note about rerender, I'm on mobile, perhaps some caching going on.
I like the alternative via name prop for input elements, or a custom data prop, as I wrote in the other comment thread.
Alternatively, I would still create a function property per onChange handler, but create and use a reusable function to limit the repetitiveness to the bare minimum.
You can create a curried function and then memoize it. 😉 It should work! Have a look at Lodash's curry and memoize functions.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.