Sheldon Cooper is React's Ref
Underutilised features of Ref
Sheldon Cooper, the weird guy from the 'Big Bang Theory,' a brilliant physicist. Blabbers perfect definitions all the time. When it comes to theoretical physics, he can give accurate references to any topic even at midnight.
But what does Sheldon have to do with React?
Sheldon is React’s Ref.
No no, you can’t do this. Are you serious?
I am. Hop on the crazy ride to uncover the relationship.
React stands with the principle of immutability, which means all the states and props shouldn’t be mutated. But they also gave Ref, to deal with the cases where you would like to mutate but without any side effect. Ref is their special child, the genius.
God (or science, if you are an atheist) gave humans the gift of intelligence and diverse abilities, but in unique cases where unparalleled expertise, precision, and a touch of eccentricity are required, they also gave us individuals like the special Sheldon, the genius.
Common Usage
Like Sheldon, Ref is often known for its photographic memory of DOM elements. Sheldon often provides accurate definitions of various topics related to physics, Ref provides accurate references to DOM elements.
We trust Sheldon and Ref for giving accurate references, so much that we confidently apply their knowledge to conduct physics experiments or manipulate the DOM(managing focus, scrolling, selecting texts, controlling input elements)
Underutilized Feature
But Sheldon has more to him which makes him special. His obsession with routine, strong aversion to change, and difficulty understanding sarcasm.
He doesn't react to jokes, has a specific spot on the couch, a particular order for his daily activities.
Similarly, Ref has more to it which makes Ref special, it can do many other things but unfortunately, many devs haven’t utilized Ref in that way.
Like Sheldon, Ref doesn’t get affected by state changes or component re-renderings. It doesn’t react to the changes around him.
And that is why Ref can be used to preserve static variables and functions. So that when components are re-rendering or when side effects are triggering, Refs are unaffected and preserved (photographic memory).
Other Unknown Features
Many times I come across code pieces where useMemo or useCallback is used without any dependencies. They can be easily replaced by Ref.
And also if you are creating a state by using useState but not resetting its value anywhere, you can easily use a Ref instead.
I would really like to your know ideas and situations where you’ve used useRef. Or any Sheldon stories that you have.
Editor’s Pick
Devs look for practice projects, building something useful rather than making those unnecessary ToDos, can uplift their portfolio and also build credibility.
One such project idea I came across was from
.
Another such idea that can be explored is shared by
Here he talks about how AI + frontend together can change the way of building applications.
See you next week.
Made with ♡
Thank you for the mention Nayan!