Today I talked to my colleague about the speed of Hot Reload when developing React applications. I told him that I tried launching from WSL and that everything updates faster. This is about pure React, not for SPFX. I was asked how I created a project and how it works for me. And it turns out that it's not always good to use old tried and tested methods.

Below you can find a small snippet to calculate the difference between 2 times in string format in TypeScript. If you use JavaScript, remove the types.

The code of the React component to scroll DIV content by axe X. It can be useful when you have a wide table and a narrow screen. Or a designer had a very cool idea of the interface.

Obviously, it's a often cased task to update an object, or even a property in one object the array of objects. Especially it's actual for React applications.

If you use a Pro version of Material UI, then you have a tool, how to switch the cells in the DataGrid table. But if you work with a wide table and you just want to make it more comfortable to work with it, there are some tricks for that. The first thing is to 'freeze' the header, so user can collate the column and headers. All the Excel users like this function. And the second thing is to allow user scroll the page if he has a small resolution and he doesn't have touch screen.

Obviously, true developers prefer to return the date in a digital format, for example, '24.01.2024', '24-01-2024' and various combinations of this. But customers often want to work with human dates. In this post you can find how to return the custom localized date and how to use it with a Fluent-UI component DatePicker.

Unlike classic Javascript applications, React works with Virtaual DOM, that’s why it’s not obviously how to add or remove class to the element. I will write about one of the ways how to make it.

We have an array of strings in React Application. Let's call it 'selectedParticipants'. And for the summary page we need to write all the members of array in one line with comma ',' between elements and dot '.' in the end in JSX block. Here is a small snippet.

Sometimes you need to get the parameters and values from the query string in your JavaScript/TypeScript applications. If you don't want to spend the time on making your own methods, you can use this one with URLSearchParams.

While the developing, especially while the code cleaning, you often want to know if your method is used or not. It’s usually when you make some temporary methods to determine the optimal one. Visual Studio shows the reference count by default, but Visual Studio Code doesn’t do that. But it’s very useful. Here is how to turn it on.