DEV Community

React Design Patterns

Necati Özmen on November 09, 2023

Author: Peter Osah Introduction: React developers can save time and effort by using design patterns, which provide a quick appro...

Read full post

Rense Bakker • Nov 10 '23

Tbh lately I've been using uncontrolled inputs more, since in most cases it's fine to grab the input values from the form data, the way html forms were intended to be used. You can still bind to the onChange handler to handle validation if needed, although it becomes harder (you have to use a ref) to do validation that relies on the values of other inputs in the form.

Stefan Schulz • Nov 13 '23

another hugh advantage of using uncontrolled components is that it doesnt trigger a rerender of the component, cause there is no state which is changed... on hugh UI's it can make a big impact in performance related stuff...

great article btw.

Micka91 • Nov 14 '23

Saying that it's an advantage to use uncontrolled components is not entirely accurate in my opinion. For me, if you encounter this kind of issue, it's because the components are not properly isolated, and the use of memo, useMemo, useCallback, useTransition, useDeferredValue, etc., is probably not being used correctly on expensive component. Having re-renders is not a problem as long as it's non-blocking for the user, and the data is not altered. It's the principle of React.

Rense Bakker • Nov 14 '23

The act of a user typing is not necessarily a state change unless you want to actually do something with whatever the user is typing. If that's not the case (and most of the time it isn't) I think its much nicer to the users CPU to let it cool off for a little bit 😜 if you update the state on each character typed, you're triggering a render on each key stroke which means the CPU has to do a bunch of work. Yes, if you build your app well, rendering shouldn't be a huge load on the CPU, but it's still a lot worse than not producing any extra CPU load at all.

SoHeil-SS • Feb 9

Use react-hook-form and your life will be sweet as haven

Rense Bakker • Feb 9

No it won't. It will just make me app rerender unnecessarily on user input.

Dusan Petkovic • Nov 10 '23

Thanks @necatiozmen, good article to refresh one's memory, I especially started using the Compound Pattern of recent, it kind of easy to group related components, and also make the sub components available for usage without importing all of them.

But also customizing how the child components will behave by wrapping them with the main component is handy.

{# changing the style by adding a prop #}
<Parent style="filled">  
   <Parent.child></Parent.child>
</Parent

<Parent style="outlined">  
   <Parent.child></Parent.child>
</Parent