React Dev Tools is an extension created by the React team. It enables developers to debug their code inside their Developer Tools.

Once you add the extension, you will get 2 new tabs in DevTools called Components and Profiler, respectively.

Components and Profiler tabs in Chrome Dev Tools

To use the full functionality of the extension, you need to be in development mode. This is because in production mode, the component names get changed to letters (as you can see in above screenshot) and you will not be able to profile your components.

How to Use the Components Tab

The Components tab allows you to debug your code in dev tools with various functionalities. Let's cover them one by one:

You can check the props/ state/ hooks of the component

Viewing Props and State

This tab will help you to look for a component and check its respective props/ state in your dev tools, without having to log them in the console separately.

You can edit the props/ state from dev tools

One of the amazing features is that you can edit the props/ state of your component in the browser itself. This helps you to reflect changes in real time without having to reload or refresh your webpage. Above is a sample video so you can see how it works.

You can search for a component

You can easily search for a component within your whole application by just typing out the name in the search bar provided. It will show you all related components with the keywords typed in. Then you can navigate between the matching results.

You can check the component's tree

Component's Hierarchy

While debugging, its important to note which parent components caused the child component to re-render. Checking this in your code is sometimes tedious. But the "rendered by" section makes it easier for you by showing all the parent components in a single place.

You can log a component's data in the console

Logging a component's data in the console

There are developers who like to work in console, and this feature allows you to log all of your component's data to console with just one click. It shows all relevant information regarding the component like props received, hooks present, which node is it in the DOM, and the file's location in your system.

You can check subcomponents

Just like checking parent components isn't always easy in your code, the same applies with checking child components.

To overcome this issue, you can double click on a component name, which will show you all the subcomponents present inside the target component in one go.

How to Use the Profiler Tab

This tab allows you to test the performance of your components and shows which components to focus on for improvements.

Profiler tab

As you can see above, I've marked a few things on the screenshot. Let's cover them one by one:

• A is the record button, which will help you record a profiling session.

• B is the refresh button, which will help you refresh the page for a session.

• C is the clear button, which will help you clear the profiling session's result.

• D is the commit chart, which will show you the list of commits during a session.

• E is the component list, which will show you the components rendered during a session.

• F is the flame chart button, which will show you the component list like E.

• G is the ranked chart button, which will show you the component list in a ranked manner.

Now let's dive into different functionalities present in this tab and how to check the performance of your web page:

How to Read the Commit Chart

The commit chart shows the list of commits during a session. If you can see in the above image, in section D, there are 3 bars. These denote 3 commits in a session. And each commit shows a side effect that caused the DOM to update.

As per the docs, "The colour and height of each bar corresponds to how long that commit took to render. (Taller, yellow bars took longer than shorter, blue bars.)"

You can even navigate between the bars and check each commit separately.

How to Read the Flame Chart

Flame chart shows the list of components rendered in a commit. If you can see in the above image, when you click on the section labeled F, all horizontal bars in the section E represent different components of the 1st commit.

As per the docs, "The colour of a bar indicates how long the component (and its children) took to render in the selected commit. Yellow components took more time, blue components took less time, and gray components did not render at all during a commit."

How to Check the Performance of Your Web Page

To check the performance of your web page, all you need to do is:

• Click on the record button.

• Use your web page so that the Profiler will be able to analyse the rendering of components.

• Click the record button again to finish recording.

Then you will see the flame chart, and you can analyse which components are taking more time to render.

Note that the flame chart also shows:

1. When exactly the component rendered.

2. And how long it took to render in a profiling session.

For example: In below image, the Home component was rendered at 1.5s of the profiling session and it took 27.7 ms to render.

Flame Chart

How to Read a Ranked Chart

When you click the Ranked chart icon as shown in section G of the image, you will get a chart view of the components. This view is in descending order, that is the component that took the most time to render will be at the top and the component which took the least time will be at the bottom.

You can see this in the below image:

Ranked Chart

Note: You can get more information about why your component rendered by just enabling the "Record why each component rendered while profiling." checkbox in settings of the "Profiler" tab. I've attached an image for reference below:

Render description

Conclusion

React Dev Tools is a great extension to have when you're working on your React applications. They can help you easily debug your code and find performance bottlenecks in your application.

Do try out these features next time in your React project.

Thanks for reading!

If you found this article useful, do share it with your friends and colleagues.

If you like to see similar tips and tricks in HTML, CSS, JavaScript and React, do Follow me on LinkedIn.

In this tutorial today, I'll walk you through what these methods are and when you should use them.

What is the filter() method?

This method returns all the elements of the array that satisfy the condition specified in the callback function.

Let's see with an example how it actually works:

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el*2 === 2);

console.log("y is: ", y); // y is: [1]

If you check out the output of the above example, the value of y is an array of 1 element that satisfies the condition. This is because the filter() method iterates over all elements of the array and then returns a filtered array which satisfy the condition specified.

What is the find() method?

This method returns first element of the array that satisfies the condition specified in the callback function.

Let's see with an example how it actually works:

const x = [1, 2, 3, 4, 5];

const y = x.find(el => el*2 === 2);

console.log("y is: ", y); // y is: 1

Now, if you see the output of the above example, the value of y is 1. This is because the find() method searches for first element in the array that satisfies the condition specified.

The main differences between above examples is:

1. filter() returns an array containing the element that satisfies the condition, but find() returns the element itself that satisfies the condition.

2. In filter(), whole array is iterated despite the fact that the element being searched for is present at the beginning. But in find(), as soon as the element that satisfies the condition is found, it gets returned.

Use Cases for find() and filter()

When you have a use case where more than 1 element is expected to be returned and you want to perform operation on all elements, then you can use the filter() method. But if you expect only a single element to be returned from the array, then you can use find() and avoid extra iterations.

Let's look at examples of both use cases:

1. filter() use case example

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el%2 === 0);

console.log("y is: ", y); // y is: [2, 4]

In above example, **filter()** makes more sense as you would want to iterate over all elements of the array to find the elements that are divisible by 2.

2. find() use case example

const emp = [
    {
        name: "Ram",
        empID: 101
    },
    {
        name: "Sham",
        empID: 102
    },
    {
        name: "Mohan",
        empID: 103
    }
];

const res = emp.find(el => el.empID === 102);

console.log("res is: ", res); // res is: {name: 'Sham', empID: 102}

In above example, **find()** makes more sense as there is just 1 employee who has 102 as the empID so, find() helps to avoid iterating over the 3rd object in the array.

Thanks for reading!

If you found this article useful, do share it with your friends and colleagues.

Use Case for Generics

Let's start with a simple example, where you want to print the value of an argument passed:

function printData(data: number) {
    console.log("data: ", data);
}

printData(2);

Now, let's suppose you want to make printData a more generic function, where you can pass any type of argument to it like: number/ string/ boolean. So, you might think to follow an approach like below:

function printData(data: number | string | boolean) {
    console.log("data: ", data);
}

printData(2);
printData("hello");
printData(true);

But in the future, you might want to print an array of numbers using the same function. In that case the types will increase and it will become cumbersome to maintain all those different types.

This is when Generics come into the picture.

How Generics Work in TS

Generics are like variables – to be precise, type variables – that store the type (for example number, string, boolean) as a value.

So, you can solve the problem we discussed above with generics as shown below:

function printData<T>(data: T) {
    console.log("data: ", data);
}

printData(2);
printData("hello");
printData(true);

In the above example printData-generics.ts, there is a slight difference in syntax:

1. You use a type variable inside angular brackets after the function name <T>

2. You then assign the type variable to the parameter data: T

Let's explore these differences a bit more.

To use generics, you need to use angular brackets and then specify a type variable inside them. Developers generally use T, X and Y. But it can be anything depending upon your preference.

You can then assign the same variable name as the type to the parameter of the function.

Now, whatever argument you pass to the function, it gets inferred and there's no need to hardcode the type anywhere.

Even if you pass an array of numbers or an object to the printData function, everything will be displayed properly without TS complaining:

function printData<T>(data: T) {
    console.log("data: ", data);
}

printData(2);
printData("hello");
printData(true);
printData([1, 2, 3, 4, 5, 6]);
printData([1, 2, 3, "hi"]);
printData({ name: "Ram", rollNo: 1 });

Let's see another example:

function printData<X,Y>(data1: X, data2: Y) {
    console.log("Output is: ", data1, data2);
}

printData("Hello", "World");
printData(123, ["Hi", 123]);

In above example, we passed 2 arguments to printData and used X and Y to denote the types for both the parameters. X refers to 1st value of the argument and Y refers to 2nd value of the argument.

Here as well, the types of data1 and data2 are not specified explicitly because TypeScript handles the type inference with the help of generics.

How to Use Generics with Interfaces

You can even use generics with interfaces. Let's see how that works with the help of a code snippet:

interface UserData<X,Y> {
    name: X;
    rollNo: Y;
}

const user: UserData<string, number> = {
    name: "Ram",
    rollNo: 1
}

In above snippet, <string, number> are passed to the interface UserData. In this way, UserData becomes a reusable interface in which any data type can be assigned depending upon the use case.

Here in this example, name and rollNo will always be string and number, respectively. But this example was to showcase how you can use generics with interfaces in TS.

Thanks for reading!

If you found this article useful, do share it with your friends and colleagues.