Hi there! Get ready to have your mind blown!!!
I want you to take a look at this code. Not much going on here.
In the snippet, the user can generate a random number but cannot see it. Finally, they can send it to the server.
This code works! This is how you should do it, right? Nope.
Problem
The variable/state random is never rendered on the screen. But we're using state for it. So, every time you update it, this component and all its child components will re-render. This is unnecessary and can lead to performance issues. Okay! But then how do you stop it?
Solution
Use useRef instead of useState. useRef doesn't cause re-renders. Amazing, right? Let's optimize our code now.
It's that simple! So, now when you don't want to render something, use this trick.
I bet you didn't know we could use useRef in situations like these. ;)
Spread the word. Share it with your friends.
Thank you.
Top comments (1)
That’s such a cool trick, will look through my current projects to try and do this!!