This week was a particularly interesting one for me. It came with a lot of surprises. In other words, it was an eye-opener to certain Javascript concepts I thought I had understood.
As usual we were given a weekly goal. A simple task: we were instructed to learn and implement the following react hooks in our project.
- React.memo
- useMemo
- useCallback and,
- useRef
In all of my period of using react.js, I haven't had no use case for the hooks mentioned above. useState, useEffect and useParams solved pretty much of my problems. In a nutshell, I did pretty basic stuff with react.
However, learning these hooks, and how to use them effectively, opened my eyes to certain concepts I otherwise wouldn't have known had I not joined the Point Blank Dev Team.
Even though I learnt a couple of things during the process, this three concepts stuck more. Namely:
I. The concept of re-rendering which got clearer. II. Second was the importance of optimization. III. Lastly, the concept of memoization (also known loosely as caching).
React.js uses the concept of state which is how a component rerenders. I was oblivious however that a child component would rerender (once the parent renders) regardless of whether or not its prop or state changed. This posed an issue of needless rerender which may consequently result in a performant issue.
Thankfully React provides a hire-order component React.memo. When this hire-order component wraps around any component, react memoizes that component and therefore prevents needless rerenders.
The useMemo on the other hand solves primarily two problems:
- Expensive functions
- Referential equality
When a component renders, it runs from top to bottom. Now, imagine in that component there is a function definition that requires a lot of computational power; this simply means the function will always rerun whenever the component renders irrespective of if the result remains the same. Let's imagine there is continous state change within the component in which the function is defined; definitely, the function will always recompute anytime the component rerenders. This spells a DOOM: The birth of a poorly performant app.
By wrapping it inside useMemo, such expensive function can be memoized (cached into memory for later use), and that way we save ourselves a costly issue. And if happens that the function computes values that may change, it is passed to the dependency array as a second argument. Cool right.
useCallback works exactly like useMemo except while useMemo returns the value of the computed function, useCallback returns the exact function itself.
In a broad sense, useRef does what "document.querySelector()" in plain old vanilla Javascript does. It is used for storing reference to an element. The useRef contains an object with just one single property "current". You can do anything with this. E.g styling
Another fascinating concept that got clearer is referential equality. Functions, objects and arrays although may reference the same exact value but their references are not treated as the same or equal in javascript. I will talk more on this later.
Peace.