re: Fast & easy... React states management in one function VIEW POST

FULL DISCUSSION
 

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

 
 

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.

code of conduct - report abuse