DEV Community: bhtibrewal

Optimizing Performance of a React Application

bhtibrewal — Wed, 04 May 2022 10:51:00 +0000

Optimization is the number one thing on every dev's mind when building any software, especially web apps. React is a JavaScript library for building user interfaces. React ships with several ways to minimize the number of costly DOM operations required to update the UI. Using React will lead to a fast user interface for many applications without doing much work to specifically optimize for performance.

When we create a rendered component, React creates a virtual DOM for its element tree in the component. Now, whenever the state of the component changes, React recreates the virtual DOM tree and compares the result with the previous render.

It then only updates the changed element in the actual DOM. This process is called diffing.

React uses the concept of a virtual DOM to minimize the performance cost of re-rendering a webpage because the actual DOM is expensive to manipulate.

The issue comes when the child components are not affected by the state change. In other words, they do not receive any prop from the parent component.

React nonetheless re-renders these child components. So, as long as the parent component re-renders, all of its child components re-render regardless of whether a prop passes to them or not; this is the default behavior of React.

Profiling the React app to understand where bottlenecks are

React allows us to measure the performance of our apps using the Profiler in the React DevTools. There, we can gather performance information every time our application renders.

The profiler records how long it takes a component to render, why a component is rendering, and more. From there, we can investigate the affected component and provide the necessary optimization.

1. Keeping component state local where necessary

import { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <h3>Input text: {input}</h3>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  console.log("child component is rendering");
  return <div>This is child component.</div>;
};

Whenever the state of the App component updates, the ChildComponent re-renders even when it is not directly affected by the state change.

To ensure re-rendering a component only happens when necessary, we can extract the part of the code that cares about the component state, making it local to that part of the code.

import { useState } from "react";

export default function App() {
  return (
    <div>
      <FormInput />
      <ChildComponent />
    </div>
  );
}

This ensures that only the component that cares about the state renders. In our code, only the input field cares about the state. So, we extracted that state and the input to a FormInput component, making it a sibling to the ChildComponent.

This means, that when the state changes, only the FormInput component re-renders, and the ChildComponent no longer re-renders on every keystroke.

2. React. Lazy for Lazy Loading Components

To implement code-splitting, we transform a normal React import like this:

import Home from "./components/Home";
import About from "./components/About";

And then into something like this:

const Home = React.lazy(() => import("./components/Home"));
const About = React.lazy(() => import("./components/About"));

This syntax tells React to load each component dynamically. So, when a user follows a link to the home page, for instance, React only downloads the file for the requested page instead of loading a large bundle file for the entire application.

After the import, we must render the lazy components inside a Suspense component like so:

<Suspense fallback={<p>Loading page...</p>}>
  <Route path="/" exact>
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
</Suspense>

The Suspense allows us to display a loading text or indicator as a fallback while React waits to render the lazy component in the UI.

3. React.memo

In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

In essence, if a child component receives a prop, a memoized component shallowly compares the prop by default and skips re-rendering the child component if the prop hasnt changed:

import { useState } from "react";

export default function App() {
  const [input, setInput] = useState("");
  const [count, setCount] = useState(0);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>Increment counter</button>
      <h3>Input text: {input}</h3>
      <h3>Count: {count}</h3>
      <hr />
      <ChildComponent count={count} />
    </div>
  );
}

function ChildComponent({ count }) {
  console.log("child component is rendering");
  return (
    <div>
      <h2>This is a child component.</h2>
      <h4>Count: {count}</h4>
    </div>
  );
}

By updating the input field, both the App component and ChildComponent re-render.

Instead, the ChildComponent should only re-render when clicking the count button because it must update the UI. Here, we can memoize the ChildComponent to optimize our apps performance.

React.memo is a higher-order component used to wrap a purely functional component to prevent re-rendering if the props received in that component never changes:

import React, { useState } from "react";

const ChildComponent = React.memo(function ChildComponent({ count }) {
  console.log("child component is rendering");
  return (
    <div>
      <h2>This is a child component.</h2>
      <h4>Count: {count}</h4>
    </div>
  );
});

If the count prop never changes, React will skip rendering the ChildComponent and reuse the previous rendered result. Hence improving Reacts performance.

React.memo() works pretty well when we pass down primitive values, such as a number in our example. And, if you are familiar with referential equality, primitive values are always referentially equal and return true if values never change.

On the other hand, non-primitive values like object, which include arrays and functions, always return false between re-renders because they point to different spaces in memory.

When we pass down an object, array, or function as a prop, the memoized component always re-renders. Here, we are passing down a function to the child component:

import React, { useState } from "react";

export default function App() {
  // ...

  const incrementCount = () => setCount(count + 1);

  return (
    <div>
      {/* ... */}
      <ChildComponent count={count} onClick={incrementCount} />
    </div>
  );
}

const ChildComponent = React.memo(function ChildComponent({ count, onClick }) {
  console.log("child component is rendering");
  return (
    <div>
      {/* ... */}
      <button onClick={onClick}>Increment</button>
      {/* ... */}
    </div>
  );
});

This code focuses on the incrementCount function passing to the ChildComponent. When the App component re-renders, even when the count button is not clicked, the function redefines, making the ChildComponent also re-render.

To prevent the function from always redefining, we will use a useCallback Hook that returns a memoized version of the callback between renders.

Using the `useCallback` Hook

With the useCallback Hook, the incrementCount function only redefines when the count dependency array changes:

const incrementCount = React.useCallback(() => setCount(count + 1), [count]);

Using the `useMemo` Hook

When the prop we pass down to a child component is an array or object, we can use a useMemo Hook to memoize the value between renders. As weve learned above, these values point to different spaces in memory and are entirely new values.

You can also use the useMemo Hook to avoid re-computing the same expensive value in a component. It allows us to memoize these values and only re-compute them if the dependencies change.

Similar to useCallback, the useMemo Hook also expects a function and an array of dependencies:

const memoizedValue = React.useMemo(() => {
  // return expensive computation
}, []);

Lets see how to apply the useMemo Hook to improve a React apps performance. Take a look at the following code that weve intentionally delayed to be very slow.

import React, { useState } from "react";

const expensiveFunction = (count) => {
  // artificial delay (expensive computation)
  for (let i = 0; i < 1000000000; i++) {}
  return count * 3;
};

export default function App() {
  // ...
  const myCount = expensiveFunction(count);
  return (
    <div>
      {/* ... */}
      <h3>Count x 3: {myCount}</h3>
      <hr />
      <ChildComponent count={count} onClick={incrementCount} />
    </div>
  );
}

const ChildComponent = React.memo(function ChildComponent({ count, onClick }) {
  // ...
});

Every time the App component renders, it invokes the expensiveFunction and slows down the app.

The expensiveFunction should only be called when the count button is clicked, not when we type in the input field. We can memoize the returned value of the expensiveFunction using the useMemo Hook so that it only re-computes the function only when needed, i.e., when the count button is clicked.

For that, we will have something like this:

const myCount = React.useMemo(() => {
  return expensiveFunction(count);
}, [count]);

Optimization techniques come with a cost if not used properly and wrapping everything in memo or useCallback won't magically make your apps fast, but using them properly and profiling along the way could be a lifesaver.

4. Windowing or list virtualization in React applications

When you want to render an enormous table or list of data, it can significantly slow down your apps performance. Virtualization can help in a scenario like this with the help of a library like react-window. react-window helps solve this problem by rendering only the items in the list that are currently visible, which allows for efficiently rendering lists of any size.

5. Lazy loading images in React

To optimize an application that consists of several images, we can avoid rendering all of the images at once to improve the page load time. With lazy loading, we can wait until each of the images is about to appear in the viewport before we render them in the DOM.

Conclusion:

To optimize our React application, we must first find a performance problem in our application to rectify. In this guide, weve explained how to measure the performance of a React application and how to optimize the performance for a better user experience.

If you find these techniques helpful do share them with others and also I would love to know of any other techniques, so do comment down below

Temporal Dead Zone

bhtibrewal — Sun, 09 Jan 2022 13:32:33 +0000

This phrase seems intimidating, right? Let's make it easy for you and start by breaking the term into pieces. Temporal means something that is temporary, Dead means something that is lifeless, and Zone in programming terms can be interpreted as the memory. The Timespan between the creation of a variable and its declaration is called the Temporal Dead Zone.

This term came into existence in ES6 with the introduction of let and const to help developers write better code and make debugging easy, by telling them that they are accessing some data before defining it.

Before ES6 there was no other way to declare variables other than var, and if var variables are accessed before declaration it would give us undefined instead.

console.log(b);// output -> undefined
var b=100;

let and const declarations are both block-scoped, which means they are only accessible within the { } surrounding them.

There's a common misconception that TDZ means let and const do not hoist. This is an inaccurate, or at least slightly misleading, claim. They definitely hoist. Read more about hoisting here

var a = 100;
if (true){
   console.log(a);// a is in TDZ
   let a = 10;
}
output-> ReferenceError: Cannot access 'a' before initialization

What's going to happen with the console.log(..) statement? If let a didn't hoist to the top of the scope, then the console.log(..) should print 100, right? At that moment, it would seem, only the outer a exists, so that's the variable console.log(..) should access and print.

But instead, the console.log(..) throws a TDZ error, because, the inner scope's a was hoisted. What didn't happen (yet!) was the auto-initialization of that inner a; it's still uninitialized at that moment, hence the TDZ violation!

So to summarize, TDZ errors occur because let/const declarations do hoist their declarations to the top of their scopes, but unlike var, they defer the auto-initialization of their variables until the moment in the code's sequencing where the original declaration appeared.

The TDZ can also be created for default function parameters.

function createTDZ(a=b, b) {
// some code here
}

createTDZ(undefined, 1); 
// output -> ReferenceError

As arguments are evaluated from left to right, the evaluation of variable a tries to access variable b before it has been parsed by the JS engine. The function arguments are all inside the TDZ until they are parsed.

Another Example:

By the way, "temporal" in TDZ does indeed refer to time not position in code. Consider:

let a = f(); 
const b = 2;
function f() { return b; } // b is in the TDZ

Even though positionally the return referencing b comes after the const b = 2; declaration, timing-wise the f() function is invoked before the let statement is encountered, while b is still in its TDZ! Hence the ReferenceError.

Takeaway:

To avoid TDZ, always make sure you define your let and const at the top of any scope. Shrink the TDZ window to zero (or near zero) length, and then it'll be moot.

CSS Box Model: For a 5-year-old

bhtibrewal — Mon, 08 Nov 2021 10:52:00 +0000

Introduction:

When you're starting off with learning HTML and CSS, things can get overwhelming pretty quickly.

You find that there's a plethora of HTML elements and CSS properties and values, and you start thinking that you need to start memorizing them all. (I got panicked by this thought) But you are wrong ( I was also ) thanks to Google you don't have to memorize them, you can look up things when you need them (and yes that's not cheating).

All you have to do is learn the basic concepts and in the case of CSS, the box model is one such concept. Before we dive deeper, let's first understand that every element in web design is a rectangular box nested inside other rectangular boxes.

Box-Model

It's a CSS standard that represents the elements of a document as boxes with certain properties (sizing, positioning, a stack of elements...) based on CSS styles. The box model is the basic building block of CSS.

Content: content of our element that has a specific width and height. A fixed height and width can be set using the height and width properties.
Padding area: space between the content and the border. The size of this area is defined by the padding property defined in the order: top, right, bottom, and left.
Border area: space between the padding and the margin. The size of this area is defined by the border-width property.
Margin area: space between an element and its neighbors. The size of this area is defined by the margin property, negative values can be provided for margins.

Inline elements:

Inline elements take only the space as that of their content. They do not start on a new line. Examples: a, span, strong, and etc.

When using inline elements it is not possible to set a fixed width or height for that element, since the element doesnt have any predetermined width and height (because the width and height are determined by the content).

Block element:

Elements of this type have their display property set to block. They take their entire row as its space. They always start on a new line. Eg: div, h1, p and etc.

Inline-Block elements:

These are exactly the same as inline just one basic difference is that in inline-block elements you can adjust the height and width of the element, which you cannot do on inline elements. They sit next to the previous element if there's remaining space, or start on a new line otherwise. Eg: button

Conclusion

So that was CSS box model one topic off the web development learn list and many more to go.