DEV Community: Bhavya Joshi

Demystifying useRef and useMemo in React

Bhavya Joshi — Tue, 07 Jun 2022 21:59:40 +0000

When it comes to React, the commonly used hooks which are useState, useEffect and useReducer, are easy to understand as well as explain.

In this blog we'll take a look at two other mysterious hooks and overcome the challenge of understanding them!

useRef
- Persist data using useRef
useMemo
- Memoization
- Where to use useMemo
Conclusion and Important Notes

useRef

useRef is short for reference and is a hook which allows persisting data across renders, but does so without causing the component itself to rerender. It is used by invoking useRef function and passing an initial value to it. First let's look at the syntax and how to use the hook.



const reference = useRef("initial value")

This returns an object which has a key called current, initialized with this initial value.



{
  current: 'initial value'
}

A very common use case for using useRef is for when, suppose you click on a button, and then on its click you want an input to come into focus. To do this, we would need to access the DOM element of input and then call its function focus() to focus the input. This is easy to do in JavaScript by just selecting the input using querySelector or by id/class and then calling its focus() function, but React does not have a simple way built in to do it.
So this can be achieved using useRef.



function focusOnInput() {
  const inputToFocus = useRef(null);
  const clickHandler = () => {
    inputToFocus.current.focus();
  };
  return (
    <>
      <input ref={inputToFocus} type="text" />
      <button onClick={clickHandler}>Focus on Input</button>
    </>
  );
}

Currently this means that the inputToFocus would look like this:-



{
  current: input
}

Every element has the ref property to access it in this way. Now let's try to understand what it means to want the previous value to be preserved across renders.

Persist data using useRef

Every functional component in React is re rendered whenever state values change. It is a JS function whose entire code is run every time a component renders. Suppose we want to persist data across these renders, the very obvious way is to use useState.



export default function App() {
  let prevValue = 0;
  const [ctr, setCtr] = useState(0);

  useEffect(() => {
    console.log("ctr:", ctr, "prevValue:", prevValue);
  }, [ctr]);

  return (
    <div className="App">
      <p>{ctr}</p>
      <button
        onClick={() => {
          setCtr((ctr) => {
            prevValue = ctr;
            return ctr + 1;
          });
        }}
      >
        Increase by 1
      </button>
    </div>
  );
}

Now ideally you might expect that the prevValue keeps updating along with the ctr. But this does not happen. But the actual output is as follows:-

This is because React says, hey! anything you write as a local variable inside my functions will be lost forever on rendering! It is not my responsibility to keep track of the local variables!
So whenever the ctr is increased, all local variables are reset. Now to persist these local variable values without using useState (and thus causing unnecessary re-renders), we can use useRef, as follows:



export default function App() {
  const prevValue = useRef(0);
  const [ctr, setCtr] = useState(0);

  useEffect(() => {
    console.log("ctr:", ctr, "prevValue:", prevValue);
  }, [prevValue, ctr]);

  return (
    <div className="App">
      <p>{ctr}</p>
      <button
        onClick={() => {
          setCtr((ctr) => {
            prevValue.current = ctr;
            return ctr + 1;
          });
        }}
      >
        Increase by 1
      </button>
    </div>
  );
}

The output looks as follows now, it works!

There are many use cases for useRef in React which allows us to avoid unnecessary renders, and allows access to input functions such as focus and blur. These were simple examples of the same, hope it was clear!

useMemo

Let's first understand a little thing called memoization.

Memoization

Suppose we have a function



function calculateSum(num1, num2) {
  // takes two arguments, returns a result after performing an expensive operation
  return finalValue;
}

Since functions are created to be reused again and again, there might be cases where the same function is being called with the same arguments. Now if this function performs a time consuming operation, it causes our code to be slow. And as we all know, time is money ;)
Memoization is a concept where we store the calculated value of an expensive function into the cache. Thus the computer remembers what value the function will return for specific values of arguments, and we can simply access this remembered value without actually performing the expensive calculations inside the function. This optimizes our code, making it run faster and smoother.
In React, there are cases where a component doesn't have to be re-rendered again and again, but because it's a child of a parent where state or props are changing, that causes it to be re-rendered.

Where to use useMemo

Let's take an example. Suppose we have a static Welcome Card to be displayed inside an application. The app also contains other states, for example a counter. Since the Welcome Card is a child of the main parent App, any state changes inside App will cause the static card to be re-rendered everytime the counter is increased.



//App.jsx
import { useState } from "react";
import WelcomeCard from "./WelcomeCard";
import "./styles.css";

const App = () => {
  const [ctr, setCtr] = useState(0);
  return (
    <div className="App">
      <h1>Application</h1>
      <button onClick={() => setCtr(ctr + 1)}>
        You clicked me {ctr} times.
      </button>
      <WelcomeCard />
    </div>
  );
};

export default App;



//WelcomeCard.jsx
import { useEffect } from "react";

const WelcomeCard = () => {
  useEffect(() => {
    console.log("Hey I am rendering again -_-");
  });

  return (
    <div className="card card-text-only card-flex">
      <h2>Hi there!</h2>
      <p>My name is Bhavya</p>
      <p>Nice to see you here</p>
    </div>
  );
};

export default WelcomeCard;

This is the output

As we can see, the WelcomeCard is rendered again everytime we click on the counter, in fact it is rendered more times than the counter. This is happening even though there is nothing that is dynamic inside the card itself, thus the re-rendering is a waste. Now imagine a website with lots of static data components, which re-render everytime states or states of parents change. To avoid this we can use useMemo as follows:-



//App.jsx with useMemo

import { useState, useMemo } from "react";
import WelcomeCard from "./WelcomeCard";
import "./styles.css";

const App = () => {
  const [ctr, setCtr] = useState(0);
  const memoizedWelcomeCard = useMemo(() => {
    return <WelcomeCard />;
  }, []);

  return (
    <div className="App">
      <h1>Application</h1>
      <button onClick={() => setCtr(ctr + 1)}>
        You clicked me {ctr} times.
      </button>
      {memoizedWelcomeCard}
    </div>
  );
};

export default App;

This ensures that the memoized card is only rendered at the initial page loading time, and doesn't re-render everytime the counter is clicked, no matter how high the value.

Yay! You have learned how to memoize your React code.

Conclusion and Important Notes

Memoization is a vast and important concept in Computer Science. You can read more about it here and here.
There are other methods to achieve memoization in React, which are React.memo() and useCallback.

That's all I have on this topic. Do let me know your thoughts and feedback below. Hope you learned something new through this!
Feel free to reach out to me on Twitter or Linkedin. I am currently actively looking for job opportunities in Frontend Dev!

Your Complete Guide to CSS Specificity

Bhavya Joshi — Tue, 10 May 2022 19:50:26 +0000

Basics of Applying styles to HTML
Priority of Styles
What is Specificity

Calculating specificity
Specificity example
Conclusion

Basics of Applying styles to HTML

CSS is what gives your website its colors and design. There are 3 primary ways that we can apply styles to HTML. These are:

Inline Styles: Inline styles are exactly what the name implies, they are written inline with the HTML element. For example

<div class="button-link" style="color: white; border: none; 
font-size: 16px; background-color: blue; width: 20%; 
padding: 1rem">Button Text</div>

This leads to the div to appear as given below, with the inline styles applied:

Internal Styles: Internal style basically means that the styles to be applied are present inside the HTML document, but not inline. They are applied using a special HTML tag called <style></style>, that is written inside the <head> tag. For example:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <meta charset="UTF-8" />
    <style>
      .button-link {
        color: white;
        border: none;
        font-size: 20px;
        background-color: pink;
        width: 50%;
        padding: 1rem;
      }
    </style>
  </head>

  <body>
    <div class="button-link">Button Text</div>
  </body>
</html>

This code leads to the div looking like the following:

External Styles: When a separate file is created that contains the styles to be applied to the whole document, and it is imported into the HTML code, this is called external style. External CSS can be imported into the HTML code using the link tag. For example:

HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="/src/styles.css" />
  </head>

  <body>
    <div class="button-link">Button Text</div>
  </body>
</html>

CSS file:

body {
  font-family: sans-serif;
  font-size: 16px;
}

.button-link {
  color: yellow;
  border: none;
  font-size: 5rem;
  background-color: grey;
  width: 50%;
  padding: 1rem;
}

This code leads to the div looking like the following:

Priority of Styles

Now let's try something, we'll try to apply all three together on that one div and see which one gets applied. It's extremely common for websites today to have multiple style sheets defined on one page.

HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="src/styles.css" ; />
    <style>
      .button-link {
        color: white;
        border: none;
        font-size: 10rem;
        background-color: pink;
        width: 20%;
        padding: 1rem;
      }
    </style>
  </head>

  <body>
    <div
      class="button-link"
      style="
        color: white;
        border: none;
        font-size: 16px;
        background-color: blue;
        width: 20%;
        padding: 1rem;
      "
    >
      Button Text
    </div>
  </body>
</html>

CSS file:

body {
  font-family: sans-serif;
  font-size: 16px;
}

.button-link {
  color: yellow;
  border: none;
  font-size: 5rem;
  background-color: grey;
  width: 50%;
  padding: 1rem;
}

The result is the same as the one we got for inline styles above:-

Why is this? It's because when different sources of styles are applied to one element, the source of the stylesheet matters in determining what style would finally be applied. In CSS, inline styles have the highest priority, followed by internal and then the external styles.

Inline styles > Internal styles > External styles

This is demonstrated by the following video:

What is Specificity

Specificity comes into picture when the source of CSS styles is the same. In this case , there are two different conflicting CSS styles that point to the same element.

So specificity helps to determine which style will get applied. It's like a ranking system for the different CSS styles. For example we have the below code:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="src/styles.css" ; />
    <style>
     .button-link {
        color: white;
        border: none;
        font-size: 20px;
        background-color: purple;
        width: 20%;
        padding: 1rem;
      }
     div {
        color: black;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="button-link">
      Button Text
    </div>
  </body>
</html>

The div will have purple background and white font, even though a conflicting style is being applied as background=yellow and font=black. This is because of specificity.

Calculating specificity

So how do we calculate it? As we need to compare it's very handy to have a numerical calculation for the priority of styles being applied to an element. To calculate specificity, let's consider a number of 4 digits:-
[0, 0, 0, 0]

Each position in the number represents the following:-

Inline styles (1000s place) - Example: <div style="color: blue;">
IDs (100s place) - Example: #footer
Classes, pseudo-classes, attribute selectors (10s place) - Example: .button-link, :hover, [href]
Elements and pseudo-elements (1s place) - Example: div, ::before

So in the above example, two different rules were defined,

one using .button-link class (Specificity = 0,0,1,0 = 10)
second using div element (Specificity = 0,0,0,1 = 1)

Since the first specificity is higher, the first rule gets applied. Calculation rule can also be written as:

Start at 0, add 100 for each ID value, add 10 for each class, pseudo-class, attribute selector, and then add 1 for each element selector or pseudo-element.

Some calculation examples are given below:-

Specificity example

Let's consider a simple example and try to guess which style will be applied to the div element in the below code:-

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="src/styles.css" ; />
    <style>
      /* Specificity = 0,1,0,0*/
      #btn {
        color: orange;
        background-color: blueviolet;
      }
      /* Specificity = 0,0,1,0*/
      .button-link {
        color: white;
        background-color: purple;
      }
      /* Specificity = 0,0,0,1*/
      div {
        color: black;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div
      class="button-link"
      id="btn"
      style="border: none; font-size: 20px; width: 20%; padding: 1rem;"
    >
      Button Text
    </div>
  </body>
</html>

As you might have guessed, the id selector has the highest specificity of 100 followed by class = 10 and then the element = 1. Thus the div looks as below:

What if we wanted to override the id style, would the below code work?

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="src/styles.css" ; />
    <style>
      #btn {
        color: orange;
        background-color: blueviolet;
      }
      .outer-box#outer .button-link {
        color: blue;
        background-color: green;
      }
      .button-link {
        color: white;
        background-color: purple;
      }
      div {
        color: black;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <section
      class="outer-box"
      id="outer"
      style="background-color: grey; width: 60%; height: 10rem;"
    >
      <div
        class="button-link"
        id="btn"
        style="border: none; font-size: 20px; width: 20%; padding: 1rem;"
      >
        Button Text
      </div>
    </section>
  </body>
</html>

Yes! You can calculate the specificity and see that .outer-box#outer .button-link has a specificity of 1,2,0 or 120 which is greater than the previous id specificity being applied of 1,0,0 or 100. Thus the div now looks like this:-

Conclusion and Important Notes

Because of CSS's cascading nature, if two rules are applied to the same element, the one that comes last will be used.
CSS Specificity is a very crucial topic to understand website styling and also for debugging the styles being applied to your site.
This blog didn't touch upon it but !important is another useful concept to know. If a style declaration contains an important rule, it takes precedence over all other declarations. !important interacts directly with specificity, even though it has nothing to do with it. However, using !important is not recommended because it complicates debugging. Check this for more information.

That's all I have on this topic. Do let me know your thoughts and feedback below. Hope you learned something new through this!
Feel free to reach out to me on Twitter or Linkedin

Var vs Let vs Const in JavaScript - What should you be using?

Bhavya Joshi — Mon, 09 May 2022 16:59:53 +0000

Variable Basics
Var

What is Scope?
What is var hoisting?
Let

Let scope
Temporal dead zone (TDZ)
Const

Const scope
Const in objects and arrays
Difference summarized

Basics

First, let's start with describing variables. A variable can be thought of as an indicator to the computer to associate a value with a particular name, and to keep track of it when it is stored in memory.

This allows for the value to be used in the future for different operations, just by using the name.
Variables are one of the key concepts that make up any programming language. They can be described as the building blocks of a language, thus it is important to know about the types and how to use them properly.

Var

"var" keyword is the original way of creating variables in JavaScript. When you use this keyword in front of a name or string, and assign a value to it, you are creating a location in the memory where this particular value is stored.

Now the important thing to note about var is that it's function scoped or globally scoped.

What is Scope?

Scope is a common concept in programming languages. Scope essentially means all the places in the program where a variable or a function is visible and thus can be accessed or called.

If a variable is said to be outside a scope, it means the program does not have access to the variable in the scope where it is currently in. The variable might exist somewhere else in the program, but can't be used in the current part of the program.

JavaScript has 3 types of scope:

Block scope
Function scope
Global scope

Var is defined as being function scoped or globally scoped, which means:-

When defined inside a function, var is accessible within it and also inside any inner functions defined in this outer function. This is the concept of closure. In the below example, var 'first' is defined inside the function varScope. It is also visible within any functions created inside varScope (i.e. innerScope). However, var 'second' created inside innerScope is not visible to the outside function as it has the function scope of innerScope.

When defined outside all functions, var variables have global scope, which means they can be accessed anywhere in the program. In the below example, hobby is a globally scoped var and is available to use inside any other functions that are created. This is not the case for the var currentGame, which is function scoped to printGame, where it is created.

What is var hoisting?

Var hoisting is another peculiar property of var variables. In most cases, it's not very common to see variables being used before they are declared. But this is possible using var, as var declarations are processed before any code is executed.

A way to remember it is like a flag being hoisted to the top, var declarations are also hoisted to the top of the program.

There is a very important distinction here - when a var is hoisted, only its declaration is hoisted and not the initialization. The initialization happens only when the assignment statement is reached. Till then the variable remains undefined (but declared).

Let

"let" is the second way of declaring variables. Let and const were released with ES2015 (EcmaScript6). Initialization with a value is optional.

Also, unlike var, let is initialized to a value only when the program reaches the part where it is present.

Let Scope

let variables are created with a block scope, or scope of expression on which it is used. This is unlike the var keyword, which declares a variable globally, or locally to an entire function irrespective of block scope. The below code will help you understand the block scope. A block can be seen as the part of the program between two { }.

Temporal dead zone (TDZ)

Another difference between let and var is that while var variables can be accessed before being declared (as we saw above, undefined is printed if you do this), let variables cannot be read/written until they have been declared.

Without initializing with a value, let variables are given the value as undefined, but accessing the variable before the declaration leads to ReferenceError. This is known as Temporal dead zone, where let variables are in TDZ and accessing them leads to error. TDZ continues till the line where let variable is declared.

Below is what the error will look like:

Const

"const" was the second form of variable declaration released in ES6 along with let. Const is used as a short form for constant, and does exactly what the word means. It is used for variables that will be constant throughout the program and never change.

It is the same as casting a variable value in cement, instead of just putting it in a box (var & let), as it will stay the same. Its value can't be changed using assignment operators.

Const variables also can't be redeclared. Const variables also require compulsory initialization with a value.

Temporal dead zone (TDZ) applies to const variables as well.

Const scope

Const has a block scope, which works the same way as described above with let.

Const in objects and arrays

Const variable values cannot be changed but this doesn't apply to objects and arrays.

Object keys can be modified, added or deleted
Object key values can be modified and removed

Similarly, in the case of arrays values can be added and deleted from the array:-

Difference summarized

Let's summarize the blog with the differences among var, let and const.

Now coming to what you should use, it's usually a personal preference but ideally, you should avoid using var due to its peculiar behavior at times. Prefer using let for variables that need to be changed and const for those that will remain the same.

That's it from my side, hope you learned something new :)
Feel free to reach out to me on Twitter or Linkedin

DEV Community: Bhavya Joshi

Demystifying useRef and useMemo in React

Table of Contents

useRef

Persist data using useRef

useMemo

Memoization

Where to use useMemo

Conclusion and Important Notes

Your Complete Guide to CSS Specificity

Table Of Contents

Basics of Applying styles to HTML

Priority of Styles

What is Specificity

Calculating specificity

Specificity example

Conclusion and Important Notes

Var vs Let vs Const in JavaScript - What should you be using?

Table Of Contents

Basics

Var

What is Scope?

What is var hoisting?

Let

Let Scope

Temporal dead zone (TDZ)

Const

Const scope

Const in objects and arrays

Difference summarized