Forem: CinArb/

7 React optimization techniques you should know

CinArb/ — Sun, 01 May 2022 00:21:05 +0000

Although the performance of an app in React depends on things like the browser running the code, the browser version, the device where our application is running, the latency of the network that the user has, etc. In this article, I want to share with you what we can do to improve performance from the React.js side.

1. Use of performance measurement tools:

First we must check our app for possible bottlenecks and errors, and in order to do so we can take advantage of some free tools that will help us greatly:

Sentry:
Sentry is presented as an "Error Tracking Software" and will allow your team to quickly find and fix bugs. If you want to learn more about Front-End Monitoring and how to get started with Sentry, please visit this link.
Profiler React dev tools:
As simple as installing the React Developer Tools extension in your browser of choice and inspecting an element on your page, to have the profiler and components option enabled and start measuring your application.

The profiler tab shows us how many times our page has been rendered under a certain action, how long it has taken, and why it has done so.

You are probably going to find a component that is not acting the way you were expecting but you can now make decisions on whether it is desirable to optimize the hierarchy of your components or if child components should render when their parent component does, and so on.

2. Manage the execution of functions

Let's say you have a search bar on your website that executes a function every time the user types in input, this function seeks to fetch data from an API call and displays the search results in real time.

Another example we see frequently on web pages is loading new items from a list of items on the screen. A third example would be if you have a listener to resize the screen, which calculates the dimensions.

If the user executes any of these actions several times, the function responsible for executing them will fire several times, and the performance of your website, or web application, will be affected.

Those are perfect examples to consider libraries like lodash and its debounce() method. A technique used to improve browser performance that allows a function to be executed only once, at the specified time-frequency since the last time the same function was called.

3.Memoize react components:

Memoise means to memorize a value to avoid processing it again, generally used to save you the cost of producing a value over and over again.

Now in react we have different ways to achieve the above, by means of the following techniques:

React.memo(): is simply a higher order component (HOC) that wraps the component we want to store in memory. So if for example its parent component is rendered, react.Memo will validate if its properties have changed, and if not, it will not render it again.

This method should be used with great caution, as this comparison process can be more costly than rendering the component we are trying to avoid rendering.

Memo is ideal for components that:

suffers multiple renderings with the use of the application and generally receives the same props.
receives props that change infrequently or not at all.
very bulky components that have a very large impact on performance.

useMemo: This function is a React hook for memoising the value returned by a function. The useMemo function accepts two arguments and returns a value. The first argument is the function and the second, like useCallback, is a variable to watch, so a new value will not be generated until that variable changes.
useCallback: This hook allows us to memorize the function we pass it as an argument, always returning the same "instance" after rendering until one of the dependencies we specify changes.

4. Virtualize a long list:

When we talk about virtualizing a list or grid, we refer to rendering on screen only the elements that the user is currently viewing.

Virtualization in lists can be both horizontal and vertical (depending on the direction we indicate to the list) and for grids, the virtualization is both horizontal and vertical at the same time. To achieve virtualization, windowing techniques are used to calculate which elements should be displayed and which should not.

There are also several libraries that allow us to create virtualized lists but there are 2 that stand out from the rest: react-virtualized and react-window. Both libraries are from Brian Vaughn who is one of the developers of the React team.

5. Code splitting React components:

Sometimes the final bundle of our application can have considerable weight and, in order to "see something" on the screen, users have to download all the information and this takes time.

This is where different code splitting techniques come to our aid.

As per MDN,

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.

In this way, we ensure that when a page initially loads, a smaller bundle will be retrieved from the server. Using the dynamic import syntax, React.lazy, and Suspense, we can code split a React component.

There are also React code split libraries that can do this . Loadable-component are one of those.

6. Dependency optimization:

If you are using some development dependencies in your application, it is important to check how much functionality you are using out of the large amount that is included by default.

This is where we can use tools like webpack bundle analyzer plugin that displays an interactive graph with the result of our bundle, what dependencies it contains and how much they weigh.

If after the analysis you find that you only used a small amount of css styles from the TailwindCSS framework, use tools like PurgeCss to help minimize the amount of css files in your final bundle.

Take a look at this list of tips on how to optimize your libraries with webpack.

7. Enable Gzip compression on web server:

GZIP is a software application used to compress and decompress files. GZIP's function is to compress files before they are served to the client browser. It allows further reduction of your HTML, CSS, and JavaScript files. Some have experienced up to 70% reduction due to compression.

If your backend is built on node.js and express you can use the compression middleware in the main file of your Node.js application. This will enable GZIP, which supports different compression schemes.

In addition to the default settings, you can customize your compression to suit your needs. There are several different properties you can use in the options object. For a complete list of properties, you can choose from, see the documentation here.

Conclusions

By applying certain techniques to a react application we can greatly improve performance. Many of these techniques or tips do not require sophisticated software but are free.

Although this was a small introduction to the world of web performance, don't hesitate to keep digging further into the subject and find more technical information on how to apply each of the techniques mentioned in this article.

Here I will leave you a list of interesting articles and if you want to contribute or help to improve this article feel free to leave a comment.

Sentry: https://blog.openreplay.com/front-end-monitoring-with-sentry-io-and-react
Profiler React dev tools: https://blog.openreplay.com/the-definitive-guide-to-profiling-react-applications
Debounce: https://www.freecodecamp.org/news/javascript-debounce-example/
Memoization: https://www.freecodecamp.org/news/memoization-in-javascript-and-react/
Code splitting: https://www.xenonstack.com/insights/code-splitting-in-react

Asynchronous JavaScript: callbacks, promises, Async/await, Event loop - part 2

CinArb/ — Wed, 30 Mar 2022 20:37:50 +0000

In the first part of this topic we could see that even though javascript is a single-threaded language, the environment in which it is executed helps us to work in an asynchronous way.

Many elements are involved in the execution of our code and one of those elements is the Web APIs. Operations we can do with the web APIs are: Fetch data, Set local storage, DOM manipulation, etc… These actions are taken apart from the main thread while they are completed. Now the question is, How does our program know when operations have ended? What are we going to do once these operations are finished?

It’s here where javascript brought to the table different mechanisms in order to control and manage these asynchronous actions. Let's take a look.

Callbacks represent: What do you want to do once your asynchronous operation is over?

Most asynchronous actions take as an argument another function (callbacks), and once the asynchronous task is finished, the callback function is called.

To see a callback in action lets take as an example setTimeOut, which is an asynchronous function that takes a callback and the time at which it should be executed.

‘Hello’ is printed on the console
Secondly, the setTimeOut function is taken to another thread, and allows the script to continue running. (setTimeOut is a Web API, so it’s placed inside its respective container)
The last line of code is executed, ‘End’ is printed on the console
Event loop, check that the call stack is now empty and the callback queue has one callback in line.
Then move the console.log function to the call stack and now we can see the word ‘world’ printed on the console.

Important to realize that even if we configure our setTimeOut to run in 0 seconds. It’s not going to be executed immediately. The result is going to be the same as before due to the setTimeOut being run in another thread.

The problem comes when you need the result of one function to call the following function. Then you start to nest as many callbacks as you need.

In essence, we are doing more complicated things, detracting from legibility, making the code difficult to maintain. This structure is also known as the Pyramid of Doom, or Callback hell.

Promises: introduced with ECMAScript 6, and brought to the language a more concise way of working with asynchronous functions

According to Eloquent Javascript: “A promise is an asynchronous action that may complete at some point and produce a value. It is able to notify anyone who is interested when its value is available”

One of the most common uses of promises in web development is to control the flow of requests (Ajax) to web servers. Let's take a look at the following snippet.

We have the Fetch method, a web API that returns a promise, and instead of passing async functions we attach them with another method called then(). The result is a more legible and maintainable code, fixing the clutter of nested callbacks and also, making error handling simpler.

One last thing that is important to mention is that with the introduction of Promises, a second high-priority queue was incorporated into the javascript runtime environment. This new queue is called the microtask queue. So when a new promise event occurs, this priority queue will be serviced first. Thus, we ensure that the callbacks of the promises will be executed in the future, and as soon as possible.

If you want to dig deeper on how to actually create a Promise and how to handle errors click on here.

ECMAScript 7 and the arrival of async/await

As mentioned earlier, with the advent of promises we are able to avoid nesting callbacks and structure our code a little better. Yet javascript found a way to give us another methodology where we can still handle asynchronous tasks but drop the chaining model of then() to use one in which we work in a more traditional way.

First of all, we have the keyword async that it’s placed before the function we want to define as asynchronous
Inside the function, we now can proceed to use the word await, and as the name implies, causes the browser to pause the execution of JavaScript code until the promise implied is resolved.
Optionally, in case you want to check for errors or rejected promises, you can always use try/catch blocks.

Note that, in the end, async await is a syntactic sugar for promises. The code looks sequential, in a synchronous way but it’s still a promise-based asynchronous code. It is also mentioned that this method enables some interesting optimizations of Memory and performance too in JS Engine.

Asynchronous JavaScript: callbacks, promises, Async/await, Event loop - part 1

CinArb/ — Tue, 22 Mar 2022 18:24:51 +0000

When we try to understand asynchrony in javascript we usually go straight to concepts like callbacks, promises, async/await and we leave out something as important as how javascript itself works.

We will therefore start from the innermost part of the program, such as the javascript runtime environment, and from there we will be uncovering layer by layer until we reach the topics mentioned above.

1.Javascript is a single-threaded language.

Javascript code is executed in order, line by line. It must finish executing a piece of code before moving on to the next. This is also known as a synchronous programming model, things happen one at a time.

let a = 1;
let b = 2;
let c = a + b;
console.log(c)

One of the biggest issues with synchronous code comes when you have to call a function that requires a certain amount of time to be solved. The next operation needs to wait even if the result of the previous operation is not required. Think of this situation in big applications, the amount of time required to run a script is very long. Loading times can be slower with synchronous programming.

2.JavaScript code is executed in a single thread, but that doesn’t mean the whole JavaScript runtime environment works in a single thread.

If you take a look at the image above you can see a visual representation of what a javascript runtime environment is. It consists of different elements and features that help to run the javascript code. Those elements are:

Javascript engine: program in charge of executing and running our javascript code, it is basically in charge of translating the code we write to machine language. In fact, there are not one if not several engines: V8 for Chrome, Chakra for Edge, Spidermonkey for Firefox.
The heap: responsible for storing our data. It is used to allocate our variables and objects
The call stack: Used to keep track of multiple function calls. Think of it as a stack of dishes that pile up, and when it comes time to wash them, the best way to do it is to take the dishes from the top until you get to the last one. If it sees an API call it sends it to the Web API container
Web APIs: those are the JavaScript programming APIs you can use to build apps on the Web. Some of the browser apis we have available are the DOM, the Fetch API, the Canvas API, and much more. So any event, API request, setTimeOut, will be placed on here until the event got fired (click a button, scroll) or we received the data from a request (fetching data from a server).
The callback queue: here will be receiving the callbacks from the Web API container. It works in a way that the first callback received is the first one sent to the call stack to be executed.
Event loop: a mechanism that manages the order of execution. It constantly checks the call stack and the callback queue. So when the call stack is empty the event loop immediately passes the callbacks in the queue for its execution.

Here is where the magic happens. The solution to this problem was resolved inside the javascript runtime environment, additional threads are being started to handle different tasks.

3.Asynchronous functions exposed by the Web API extend the language

Now we can see that even though there is the main thread in which all the code we write in our programs is executed (call stack) there are asynchronous functions exposed by the Web API in the browser that perform some operations (fetch data, set local storage, dom manipulation) that do not block the main thread simply because they are not performed in that thread ( waiting on the callback queue).

Important to realize that the concept of more than one thing happening at the same time, or multiple related things happening without waiting for the previous one to be completed is the base of the term Asynchronous.

Therefore, with all of the above, we can conclude that Javascript is asynchronous and not blocking.

Next, we will start to talk about the different mechanisms javascript has brought to the table in order to control and manage these asynchronous actions. Those mechanisms are, as you can guest: callbacks, promises, and async/await functions.

Thanks for reading and if you have any suggestions please don't hesitate to leave a comment, I will be happy to take into account your recommendations.

I'll also leave bellow some links where you can find more info:

https://youtu.be/8aGhZQkoFbQ
https://eloquentjavascript.net/11_async.html
https://medium.com/@gemma.stiles/understanding-the-javascript-runtime-environment-4dd8f52f6fca

React Challenge: Autocomplete functionality in React from scratch

CinArb/ — Wed, 16 Mar 2022 00:54:55 +0000

In today's challenge, we will look at implementing autocomplete functionality in React and how to improve the performance of this approach by using the debounce function and the useMemo hook.

I’ll be using a function to call the Rick and Morty REST API to return all the locations from the show.

Creating the Search Bar

I’ll just have a single component called App that includes a form tag. Inside the form, we have the input and datalist element.

With the input element, we will be reading the location the user is typing and then we can bind the datalist to the input. This will provide an autocomplete feature and the user can see a drop-down list with suggestions.

import "./styles.css";
import {useState} from 'react';
import axios from 'axios';
export default function App() {
// state that controlled the input value
const [query, setQuery] = useState("")
// state that hold API data
const [suggestion, setSuggestion] = useState([])
const getLocations = () =>{
  axios.get(`https://rickandmortyapi.com/api/location/?name=${query}`)
  //only add the data with the list of locations to the suggestion array
  .then(data => setSuggestion(data.data?.results))
  .catch((err) => {
    //handle error when user types location that doesn’t exist from API
    if (err.response && err.response.status === 404) {
      setSuggestion(null)
      console.clear()
    }
  })
}
return (
  <form>
    <input
      type="text"
      placeholder="Type location"
      name='query'
      value={query}
      onChange={(e) => {setQuery(e.target.value); getLocations()}}
      list='locations'
    />
    <datalist id='locations'>
    { query.length > 0  && // required to avoid the dropdown list to display the locations fetched before
      suggestion?.map((el, index) => {
        //make sure to only display locations that matches query
        if(el.name.toLowerCase().includes(query)){
          return <option key={index} value={el.name}/>
        }
        return '';
      })
    }
    </datalist>
    <button>Search</button>
 </form>
);
}

In the above snippet we have:

one state variable called suggestion. That’s going to hold the info we receive from the API
getLocations() that enclose the axios request and will be called when the user is typing on the search bar.
The URL we pass through axios will contain the query we get from input
From the response, we only want the results array, that contains the name of the locations.
We need to catch errors when the user types a location that does not exist. The browser by default will be throwing errors to the console if we continue typing a location that does not exist. So we added console.clear() to avoid that.
Finally, as we receive the info, we will be mapping through the array and set the value of the option equal to the name of the location. It’s important to add the key property so we don’t get an error.

https://codesandbox.io/s/autocomplete-zmw5ln?file=/src/App.js

You can take a look at the above codesanbox and see that it works.

The Problem:

Although we have accomplished the task, we must bear in mind that it’s very inefficient to make one API call per keystroke. Imagine in a real project scenario, we could harm the performance of the application and also saturate the API.

The solution:

One of the ways to avoid this is to use a function called debounce which helps us to postpone the execution of the function by a few milliseconds and therefore cancel the previous calls and execute the new one.

If you want to know in-depth about debounce functions feel free to click on here.

function debounce(callback, wait) {
   let timerId;
   return function (...args) {
     const context = this;
     if(timerId) clearTimeout(timerId)
     timerId = setTimeout(() => {
       timerId = null
       callback.apply(context,  args)
     }, wait);
   };
 }

In our case, we are going to pass as a callback the function getLocations with a delay of 300 milliseconds.

<input
      type="text"
      placeholder="Type location"
      name='query'
      value={query}
      onChange={(e) => {setQuery(e.target.value);    debounce(getLocations, 300))}}
      list='locations'
    />

If we try to implement the debounce function in React we will see that nothing happens. The reason why is that each time the user types we are making a new rendering and therefore generating different instances of the debounce function.

As we don't want to generate different instances but to preserve the same one we must seek the help of a hook called useMemo.

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

export default function App() {
 const [query, setQuery] = useState("");
 // state that hold API data
 const [suggestion, setSuggestion] = useState([]);

 const getLocations = (e) => {
   setQuery(e.target.value)  axios.get(`https://rickandmortyapi.com/api/location/?name=${query}`)
     .then((data) => setSuggestion(data.data?.results))
     .catch((err) => {
       if (err.response && err.response.status === 404) {
         setSuggestion(null);
         console.clear();
     }
   });
 };

 function debounce(callback, wait) {
   let timerId;
   return function (...args) {
     const context = this;
     if(timerId) clearTimeout(timerId)
     timerId = setTimeout(() => {
       timerId = null
       callback.apply(context,  args)
     }, wait);
   };
 }

 const debouncedResults = useMemo(() => debounce(getLocations, 300), []);

 return (
   <form>
     <input
       type="text"
       placeholder="Type location"
       name="query"
       onChange={debouncedResults}
       list="locations"
     />
     <datalist id="locations">
       {query.length > 0 && // // required to avoid the dropdown list to display the locations fetched before
         suggestion?.map((el, index) => {
           if (el.name.toLowerCase().includes(query)) {
             return <option key={index} value={el.name} />;
           }
           return "";
         })}
     </datalist>
     <button>Search</button>
   </form>
 );
}

Now we can see that we have implemented the hook useMemo. Basically what it does is to save the instance of the debounce function and not create new ones every time the user types in the search bar.

That’s all we needed. You can see the final result in the following codesandbox link: https://codesandbox.io/s/autocomplete-debounce-function-and-usememo-e1qzfy?file=/src/App.js:0-1588

Understanding Context API

CinArb/ — Fri, 11 Mar 2022 20:52:45 +0000

React context API was introduced in 2018 in version 16.3.0. Its main purpose is to manage global states. It’s a really good alternative to prop drilling. In other words, sending props from higher level components to lower levels, that means passing data around to components that don't even really need it.

How to use Context Api:

Separate the code from your component structure. Normally you would create a folder called context and create different files depending on the context. Examples: Theme context, user authentication context, language context.
Then we import “create context” and proceed to use the method createContext() as follows.

Now we are going to create the Provider component. The idea is to wrap all the components that need the data inside the Provider.

As you can see on the code snippet above, we create the ThemeProvider and pass the children as a prop. We return the ThemeContext.Provider who is in charge of pass the data necessary to the children inside this component.

Export context and provider. remember not to ad {} on any data that we are going to export as default.
Import the ThemeProvider the most near possible to the components that are going to use the data.
And finally, in order to consume the context, we need to use the useContext hook.

In this final line we use destructuring to only bring the data we need on that particular component.

Conclusions:

Context API is a great option for small projects because it is a built in package and thus, does not extend the size of our project. As you can see It’s really easy to understand.

However, context api is not advisable for large-scale applications. This is because every time the value of the context changes all the consumer components rerender. And this can become a nightmare when it comes to your app performance.