Writing optimized and well-structured applications today will make you save a bunch of time tomorrow
In this article, I wanna show you the differences between React useStateand useRef implementing a form without third-party libraries.
Both of the methods are valid and we should choose the most suitable according to our needs, and this means that we could use both in different places inside our application.
How to read the blogpost
Keep the 👀 open and check the ### Refreshing console log inside the Demo examples.
Read the description under the examples to understand in-depth the differences.
If you have some problem with the Codesandbox iframe, check your browser settings for third-party cookies and site data. Here there is a Chromium example.
First method: useRef
The first method is using React.useRef hook. It's the most underrated but will allow you to optimize the form if you do not need special controls.
React.useRefwill allow you to write forms without re-render the component for each user input optimizing the application at the expense of real-time controls, enabling/disabling the form submit button based on the user input and previews.
Code example
Demo
As you can see from those examples above the implementation with useRef is dead simple. We didn't use the component state and this means that the component isn't refreshed — in fact, the console log prints the ### Refreshing string once.
The biggest limitation is that I can't disable/enable the button based on the user inputs and we can't validate the form live but we can do it on submit.
Second method: useState
The second method is using React.useState hook. It's the most used and sometimes abused since a lot of forms don't need real-time validation.
It's also the most problematic for people who don't use useCallback and/or useMemo hooks that are indispensable to writing a great application since the component is reloaded for each user input and if the component has a lot of not-cached functions you may slow down the application a lot.
React.useStatewill allow you to re-render the component for each user input losing slenderness to build more complex forms with real-time controls, i.e.
Code example
Demo
It seems that the React.useState implementation is easier than the React.useRef one. We are using the component state and this means that the component was refreshed a bunch of times — in fact, the console log prints the ### Refreshing string more than 60 times.
If you wrote a big component with other nested components without using useCallback and useMemo is not a good approach using a form made in this way.
Conclusion
Use useState if you want to build complex forms, otherwise I recommend you use useRef. In my option, live validation and this kind of UI improvements don't add a lot to the UX but a fast and snappy application will do.
That's all
That’s all! I hope that this blog post will help you understanding some small React internals to improve your application.
Did you like this article? Let me know with claps and comments 🙏
Do you need help with your ReactJS/NextJS app? Contact me!
Do you want to join Nebulab? Apply here!
