How to render long lists with React-select and React-window? This article shows how to use a common virtualization technique to reduce render time and significantly improve performance.

Efficient rendering of really large lists with react-select

<h2>Introduction</h2>
Using React as the UI framework of a web application always leaves developers with many choices through the development process. One of the most popular decisions to make is which Select component to use. <a href="react-select.com">React-select</a> is the first choice when to select component (with many other features) is required - it has 20.5k stars on GitHub and 2 million weekly downloads on npm.&nbsp;
Like any common open-source component, react-select solves the common use cases very well. However, at the edges, react-select might disable, falls short sometimes and calls for customizations.
The problem we want to tackle with react-select is quite common: we would like to allow selection from a large list of options. How large? While working on some of <a href="https://fasterthanlight.me/projects" target="_blank" rel="noopener">FTL projects</a>, we've seen the component start to break at around 1,000 options.&nbsp;
So, keep reading and we'll show you how it breaks, when react-select desabled, and also demonstrate to you how we improved the performance by using another open-source library -&nbsp;<a href="https://github.com/bvaughn/react-window">react-window</a>. Finally, we'll dive into the react-window implementation to understand how it is achieved.
By the way - the entire code used in the post is public.&nbsp;

<h2>Challenges of setting React-select for long lists</h2>
To demonstrate the problem, we've created a new project with create-react-app. We added the react-select component by running `<code>yarn add react-select</code>`.
The most simple code for displaying a select component would be: 
<pre class="language-javascript"><code>import React, { useState } from "react";
import Select from "react-select";
import "./App.css";
 
const options = [...Array(100).keys()].map(idx =&gt; ({
 value: `value-${idx}`,
 label: `label-${idx}`,
}));
 
function App() {
 const [inputValue, setInputValue] = useState("");
 
 return (
 &lt;div className="App"&gt;
 &lt;header&gt;
 &lt;h1&gt;React-select With Large Lists&lt;/h1&gt;
 &lt;/header&gt;
 &lt;div style={{ width: "30%", margin: "auto" }}&gt;
 &lt;Select
 inputValue={inputValue}
 onInputChange={val =&gt; setInputValue(val)}
 options={options}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}
 
export default App;</code></pre>
 
This would result in a high-performance select component, with 100 options. We'll use the same code to generate a large and long list of items to include in the select.
The following two gifs compare the performance of a React-select dropdown with 100 options to that of 10,000 options: 
<table>
<tbody>
<tr>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9b68801905f0b24ee608026b098b1ed251bb767f/1WNemZzm8ZLPIPcxs6Vse0ozqnXA1T0AGCLEZEFY.gif" alt="React select 100 options" width="595" height="455"></td>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHdCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e361afc06a6675d4e27c79df72680391bebd6456/1Y89oZvmrGG0DmPHokp_6W54JjKhvx3wLwQskscw.gif" alt="React select 10,000 options" width="514" height="455"></td>
</tr>
<tr>
<td>
React select 100 options
</td>
<td>
React select 10,000 options
</td>
</tr>
</tbody>
</table>
&nbsp;
The performance degradation is significant. With 10,000 options, the react-select component takes about 5 seconds to open its options menu. Why should it take so long? In both cases, only the first 8 or so options are visible. This is the first hint to how react-window approaches this problem - let's go into details.

<h2>React-window comes to the rescue</h2>
The key to improving the React-select performance is limiting the rendering of the long list. It's enough to only render 8 items while keeping the same usability as rendering all 10,000 items.&nbsp;
React-window is another prevalent open-source library, with 8.5k stars on Github and 300,000 npm downloads. React-window is used to render large lists in a virtual way: only the visible elements of the list are actually rendered.
How do we combine the two? Lucky for us, react-select exposes an API that allows us to replace any of its core building blocks. In this case, we would like to replace the MenuList component with our own, custom, MenuList. The new declaration of react-select would look like so:
<pre class="language-javascript"><code> ...
&lt;Select
 inputValue={inputValue}
 onInputChange={val =&gt; setInputValue(val)}
 options={options}
 components={{
 MenuList: CustomMenuList,
 }}
/&gt;
...</code></pre>
And now in our own CustomMenuList component, we utilize react-window to virtually render the list of options. To enable the virtualization, we must provide the virtualized list with some basic data about the it: the list's height, and the height of each item in the list. That way the component knows exactly how many and which items to render.&nbsp;
The list's height is passed to the component as the props of the MenuList component, as provided by the react-select library. We determine the item heights ourselves, per our usability needs.
This is how the CustomMenuList ends up looking:
<pre class="language-javascript"><code>import { FixedSizeList as List } from "react-window";
 
const CustomMenuList = props =&gt; {
 const itemHeight = 35;
 const { options, children, maxHeight, getValue } = props;
 const [value] = getValue();
 const initialOffset = options.indexOf(value) * itemHeight;
 
 return (
 &lt;div&gt;
 &lt;List
 height={maxHeight}
 itemCount={children.length}
 itemSize={itemHeight}
 initialScrollOffset={initialOffset}
 &gt;
 {({ index, style }) =&gt; &lt;div style={style}&gt;{children[index]}&lt;/div&gt;}
 &lt;/List&gt;
 &lt;/div&gt;
 );
};
</code></pre>
The first thing we would like to see is performance improvement. This is the normal react-select rendering alongside the virtualized list one:
&nbsp;
<table>
<tbody>
<tr>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDBCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3ac32457a8f04ff0b4cb455a58df12f69b0bb64c/3.gif" alt="react native select dropdown" width="536" height="455"></td>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDRCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7fd3353b1be2fa99dfe6798752f65d6a1d74342e/4.gif" alt="react-native-select-dropdown" width="514" height="455"></td>
</tr>
<tr>
<td>
React select 100 options
</td>
<td>
React select 10,000 options
</td>
</tr>
</tbody>
</table>
&nbsp;
The time to render with the virtualized list is almost the same as the list with 100 options. Also - the rest of the react-select functionality is enhanced: filtering options by value search, selecting an option or scrolling down the list. These were almost unusable before virtualizing the list.

<h2>React-window Shallow Dive</h2>
React-window solves the performance problem by virtualizing the list, and only rendering the visible items. At this point, it's important to note that mounting elements to the real (i.e non-virtual) DOM is the most expensive operation for the browser to perform. In order to avoid performance degradation, we will try to minimize the number of such operations. What does it look like in the real DOM?&nbsp; 
This is the DOM of the normal react-select options list:
<img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDhCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bb1a74e55fd23fe3b63470b8e64973b2d6c959ae/5.gif" alt="React-select with large lists" width="600" height="312">
And this is the new DOM with the virtual list:
<img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdUFCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4eb440265b421729c29af007be1a48a1e23b60c9/6.png" alt="React-select with long list " width="600" height="304"> 
The new DOM only has 9 list items. Of course, when scrolling down the list the items that are rendered change, but the amount of items remains 9 all the same. 
To better understand how this is achieved, we can inspect the react-window code. The key is a couple of methods called getStartIndexForOffset and getStopIndexForStartIndex:
<pre class="language-javascript"><code>getStartIndexForOffset: (
 { itemCount, itemSize }: Props&lt;any&gt;,
 offset: number
 ): number =&gt;
 Math.max(
 0,
 Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
 ),
 
getStopIndexForStartIndex: (
 { direction, height, itemCount, itemSize, layout, width }: Props&lt;any&gt;,
 startIndex: number,
 scrollOffset: number
 ): number =&gt; {
 const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
 const offset = startIndex * ((itemSize: any): number);
 const size = (((isHorizontal ? width : height): any): number);
 const numVisibleItems = Math.ceil(
 (size + scrollOffset - offset) / ((itemSize: any): number)
 );
 return Math.max(
 0,
 Math.min(
 itemCount - 1,
 startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
 )
 );
 },
</code></pre>
The start index is calculated by the scroll offset, and according to the item's height. The stop index is fitted to the start index and is calculated by the provided height and item height. The visible items are inferred by the start and stop indexes, and rendered to the screen accordingly.
&nbsp;

<h2>Conclusion: Choosing React-select dropdown for long lists or not?&nbsp;</h2>
React-select is a great choice for dropdown components in React applications. We analized react-select options, how the react-select component might break for a large list use case, while also discussed how to handle it. React-select dropdown is smart to provide a strong customization API, which should be a consideration when choosing an open-source component.
Moreover, we explained how to use react-window, as a very straightforward solution to handling large amounts of data, and rendering long lists efficiently.
The virtualization of list rendering can be used in many cases. Any time we would want to render a long list, we can utilize virtual rendering to enhance performance. Even such seemingly tiny change in list perfromance might be a good start for <a href="https://fasterthanlight.me/blog/post/increasing-performance-react-next">improving your app's efficiency overall</a>. So, give it a try!

 Learn the prominent software development trends in 2021. Stay up to date with the latest tech innovations on the Faster Than Light blog!

Top 8 Software Development Trends in 2021: 1. Big Data Solutions 2.Rise of AI... 

2020 marked a challenging year for all of us. The global pandemic has shaken the world, which led to the significant transformation in various industries&mdash;and software development was no exception.&nbsp;
Social distancing, lockdowns, and related restrictions caused - tremendous <a title="Covid-19 impact on software and app development" href="https://www.designrush.com/agency/software-development/trends/covid-19-impact-on-software-and-app-deveopment-services" target="_blank" rel="noopener">impact caused by Covid-19</a> - forced millions of companies to abandon their offices, which only fueled the demand for management and enterprise systems. Other software solutions were on the rise since we witnessed a significant increase in <a href="https://www.statista.com/statistics/1116831/business-software-spending-covid19-forecast/">software spending</a> across all areas, including web conferencing applications, collaboration, and remote tools, e-learning platforms, etc. These were&nbsp; software development trends 2020.&nbsp;
Since social distancing and other precautionary measures seem likely to stay with us a while longer, investing in and leveraging the latest technology in software development might be a good solution to keep your business afloat.&nbsp;
To ensure you succeed in this challenging endeavor, we compiled a list of the top eight software development trends that will dominate the global market in 2021.

<h2>The Most Prominent Software Development Trends of 2021 </h2>
<h3>Big Data Solutions</h3>
&ldquo;The world is one big data problem.&rdquo;― Andrew MacAfee
Data is power, and those who possess it will dominate the industry. Big data solutions are frequently listed among the current software development trends. Businesses and large corporations have been utilizing big data to extract meaningful insights and apply them to better market their products and services.&nbsp;
While 54% of companies are taking the first steps in adopting big data analytics, unstructured data remains a top problem for 95% of companies worldwide. The demand for big data solutions remains high, which means it&rsquo;s going to be a leading software industry trend in the upcoming year.
<h3>The Rise of AI</h3>
Artificial intelligence has already received multiple applications across industries. It&rsquo;s widely applied to automate business operations, carry out in-depth market research, gather analytics, enhance data flows, and more. It all makes AI on of the biggest trends in software engineering.
According to <a href="https://www.idc.com">IDC</a>, AI revenues are expected to hit $156 billion in 2021, which is a 12% increase from 2019. If you&rsquo;ve been wondering which new technology to apply to software development, artificial intelligence might be a good option. With the capabilities it provides, you&rsquo;ll have every opportunity to build a revolutionary solution to disrupt the market.&nbsp;
<h3>5G Technology</h3>
5G has been making the headlines of all IT blogs for almost two years. It&rsquo;s one of the current software development trends that are going to stay with us in 2021. This technology innovation caused a real buzz on the market, but, unfortunately, hasn&rsquo;t seen a wide deployment in recent years.&nbsp;
In 2021, 5G is expected to meet the needs of its advocates and introduct a new wave of innovative software development. With the release of 5G New Radio, a radio access technology designed for 5G native mobile networks, the network capacity will increase, which will enable businesses to use it for everything from machine learning systems to large-scale IoT devices.&nbsp;
If you&rsquo;ve been waiting for this innovation, 5G technology might be the best choice of software development trends for you.
<h3>Microservices Architecture</h3>
We&rsquo;re now seeing a dramatic shift from monolithic structures to microservices architecture, and that trend is only predicted to accelerate in 2021.&nbsp;
Monolithic architecture has been successfully applied across industries. But with changing consumer demands, and the emergence of new tech that required reduced downtime and more agile development, companies faced the need for a new architecture.&nbsp;
Microservices allow applications to be built as a set of small independent units that can be developed and launched separately. This software industry trend will provide businesses with greater flexibility, reduced costs, increased agility and innovative software development.&nbsp;
<h3>DevSecOps</h3>
If you&rsquo;ve been operating in the IT market long enough, you&rsquo;ve probably heard about DevOps. It was a leading software development trend in 2018, and it undoubtedly continues to perform an important function in all IT organizations.&nbsp;
However, the latest tendencies clearly show that we&rsquo;re likely to see the integration of security practices in DevOps processes, which will result in the rise of a new field called DevSecOps.&nbsp;
The ascent of new software development technologies&nbsp;will enable DevOps to conduct security testing without the need to involve a security expert. DevSecOps provide companies with more opportunities to build reliable systems, capable of processing high-load operations.&nbsp;
<h3>Cloud Computing</h3>
As more and more companies are moving online, the cloud becomes a helpful tool in digital transformation and software modernization. The capability to store corporate data securely on someone else&rsquo;s device, without the need to keep it on your own computer, allows for better synchronization.&nbsp;
Cloud services have been listed among the top software development trends for several years, and continue to occupy a position as one of the most demanded&nbsp;technologies in software development which is on the market in 2021.&nbsp;
<h3>Multi-cloud Infrastructures</h3>
If you haven&rsquo;t heard about multi-cloud infrastructure yet, you probably will in 2021 as it becomes one of the destinctive software trends. The release of <a href="https://aws.amazon.com/ru/blogs/containers/introducing-amazon-ecs-anywhere/">Amazon ACS Anywhere</a> next year will mark a prominent event in the software development industry.&nbsp;
In addition to AWS-managed infrastructure, users will be able to store whole data centers in the cloud without fear of missing important information. Even when connectivity is lost, the infrastructure will continue running on the customer premises.&nbsp;
Tech behemoths have already caught up with this software engineering trend. A number of big corporations, such as Google and Facebook, are investing in technologies capable of building reliable serverless and microservices applications.&nbsp;
<a href="https://aws.amazon.com/ru/blogs/containers/introducing-amazon-ecs-anywhere/">Quarkus</a> and <a href="https://micronaut.io">Micronaut </a>were designed to support a majority of cloud features, including Kubernetes and Eureka. They eliminate dependence on third-party services and provide support for AWS Lambda, which makes it possible to build innovative and scalable serverless apps in no time.&nbsp;
Implementing new technologies in software development will enable companies to improve their data flow, launch solutions that better fit market demand, and accelerate the development of more flexible and agile software systems.&nbsp;
<h3>Cross-platform Development</h3>
When listing the latest software development trends, we can&rsquo;t neglect to mention cross-platform development. The euphoria about native applications has come to an end. Modern multi-platform technologies, such as React Native or Flutter, simplify the creation of innovative applications with an appealing design that run seamlessly on any platform and provide an exceptional user experience.
Such software also enables businesses to reach a wider audience, which opens up more opportunities for marketing and promotion. Opting for cross-platform development may become the key software engineering trend in 2021 and keep its position among software trends 2023 and 2024.
<h3>Progressive Web Applications</h3>
Progressive web apps or PWA are not new to the market. PWAs have been on the rise for several years due to their potential to provide a near-native experience.&nbsp;
In 2019, more than<a href="https://www.statista.com/statistics/568684/e-commerce-website-visit-and-orders-by-device/"> half of online shopping orders</a> came from mobile traffic, which means optimizing your website for mobile users will be a must in 2021. Progressive web apps allow your customers to visit the website from any device without downloading a special application, which removes extra barriers to purchasing products in your store.&nbsp;
When every business moves online, having cost-effective software that can be built within tight deadlines is paramount. Thus, PWA will definitely be among the top software industry trends in 2021.

<h2>Conclusion</h2>
Now when you&rsquo;re aware of the upcoming software development trends that will dominate the industry in 2021, it&rsquo;s the right time to act! <a href="https://fasterthanlight.me/services">Faster Than Light</a> has a professional team of software engineers who will analyze your request and introduce the latest technology solutions and top trends in software to your business.

8 Software Development Trends to Implement in 2021

With a mission to lead our partners to digital brilliance, we can’t help but feel exhilaration whenever we receive a brand new review on Clutch.

Faster Than Light Earns 5-Star Review for Ongoing Development

The development of your site&rsquo;s frontend has a significant impact on your product&rsquo;s performance. Of course, people with extensive experience in development know that the backend is as important. But for many users, the frontend is what dictates their impression of the program.
In 2021, there are&nbsp;<a href="https://medium.com/geekculture/top-front-end-development-trends-you-should-follow-in-2021-64d7129fc066">different techniques and technologies</a> that developers utilize to innovate their frontend development. But if you&rsquo;re looking to substantially improve your project, having a dedicated team of developers is an advantageous option. Here at Faster Than Light, we&rsquo;ll help you turn your concepts into an outstanding digital product. As an extension of your team, our design and development geniuses will provide you with one-of-a-kind solutions to your project.
&nbsp;
With a mission to lead our partners to digital brilliance, we can&rsquo;t help but feel exhilaration whenever we receive a brand new review on Clutch. Here&rsquo;s the latest addition to our collection of feedback: <img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBa2NDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e8922e2385eb70128364c80666f4507db478c6f7/Screenshot%202021-08-10%20at%2011.02.20.png" alt="" width="850" height="458"> 
To explain, Clutch is an established platform in the heart of Washington, DC, committed to helping small, mid-market, and enterprise businesses identify and connect with the service providers they need to achieve their goals. Their team of analysts interview service providers&rsquo; clients to collect client feedback, analyze industry data, and compare competitors in a specific market to arm businesses with the information they need to connect with the right service providers. The platform is invested in publishing in-depth client reviews, data-driven content, and vetted market leaders that businesses can access for free.
&nbsp;
Like Clutch, The Manifest, its sister platform, is another effective resource for businesses when looking to hire the <a href="https://themanifest.com/ua/software-development/companies/kiev?page=1#fasterthanlight">best companies</a> in an industry or location. We&rsquo;re proud to be on The Manifest&rsquo;s list of Top 100 Software Development Companies in Kyiv.
&nbsp;
In their interview with Clutch, our partner, Papaya Inc. described the hiring process and the solutions they need from us in our ongoing engagement.
&nbsp;
&ldquo;We&rsquo;re building a plant-based restaurant platform... Faster Than Light assists us with full-stack software development, but mainly in frontend development. We are working together on two websites.&rdquo;
&nbsp;
&mdash; Edoe Cohen, CEO, Papaya, Inc.
&nbsp;
While the project is still underway, we&rsquo;re honored to be recognized by the client for the quality of our work thus far.
&nbsp;
&ldquo;I feel that I have their attention and that I&rsquo;m in good hands.&rdquo;
&nbsp;
To learn more about our work, feel free to <a href="https://clutch.co/profile/faster-than-light?sort_by=date_DESC&amp;project_cost=&amp;service_provided=&amp;review_type=">visit us on Clutch</a>.
 Or find out how we can help you realize your development vision by <a href="https://www.fasterthanlight.me/book-denis" target="_blank" rel="noopener">connecting with our CEO</a>.

In this article, you can read hacks and instructions how to get 100% of Lighthouse Performance score for React.js and Next.js apps

Increasing React/Next.js Performance in the apps for Google Lighthouse

<a href="https://saleslion.io/sales-statistics/39-of-people-will-stop-engaging-with-a-website-if-images-wont-load-or-take-too-long-to-load/" target="_blank" rel="noopener">39% of users </a>will stop engaging with content when loading time takes too long. Performance is highly important for each website. Only if your website quickly responds, is optimized, loads fast, and so on, in most cases, these will be taken for granted by users. Your designers can do incredible work and make your website sweet like candy, but if it loads slowly, believe me, the user will notice it first and leave with an unpleasant aftertaste.

<h2>Lighthouse Performance</h2>
Google is aware of user's preferences and therefore performance is one of the most important metrics it uses to decide which search page your site is shown on. To determine such indicators, Google has its own Lighthouse service. At the moment, the current version is v8, but some Google documentation already mentions the ninth version. While Lighthouse defines metrics like performance, accessibility, SEO, best practices, PWA, performance is where the most contentious issues arise.
The performance by itself is determined by several sub-metrics &ndash; TBT (Total blocking time), LCP (Largest contentful paint), CLS (Cumulative layout shift), TTI (Time to interactive), FCP (First contentful paint), Speed index. I&rsquo;m listing them in order of performance impact. We will practically not talk about the Speed index, including Speed Index Lighthouse, since this is a very difficult metric to understand and change on the part of a programmer.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWNDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--dc89604f8e2438f1248a403dae4b627955192eb1/unnamed.png" alt="speed index metrics" width="883" height="402">
Lighthouse has two verification options: for desktop and mobile devices. During testing on mobile devices, performance metrics will always be lower. Let's be honest, we are looking for information using our phones more and more often. So you can't just ignore that fact. Your application should run fast enough on any device.
There is another metric that we have not mentioned yet, but it is extremely important. This is the time to the first bit (Time To First Byte &ndash; TTFB). TTFB measures the duration between an HTTP request and the beginning of the server's response. Back-end specialists have more opportunities to influence it. However, frontenders can at least avoid requesting unnecessary data, which is especially true if you are using GraphQL.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWtDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--12b50a2a43a0c04bc83e94de3459ddff376ab10a/unnamed%20(2).png" alt="Time To First Byte description" width="891" height="280">

<h2>Total Blocking Time &lt;300ms for mobile devices</h2>
This is the time between the first rendering of site content and the moment your application becomes fully interactive. And, no&hellip; Your application does not immediately become interactive as soon as you see its first elements. There is a short period when the main thread is blocked and does not respond to any user reactions. How long it will be blocked, entirely is up to you. Each time the main thread encounters a task that takes over 50 milliseconds, that task is automatically considered as too long and the thread is considered as blocked. Fortunately, TBT takes into account only the time greater than 50ms. So, if you have a long-lasting task that takes 53 ms, then TBT will be only 3 ms. But if there are several tasks like this, the extra execution time will be summed up.

<h2>Time to interactive &lt;5s</h2>
This is the time on the scale between the first rendering of content and the so-called &ldquo;quiet window&rdquo; of 5 seconds. This is the 5 seconds when there are no long-lasting tasks for execution. Server rendering can cause a page to look interactive but it's not actually interactive due to blocking the main thread. Hereby, you see the button, but nothing happens when you click it. It infuriates users, as Google informs that your site is slow. It can lead to unexpected page jumps, so don't be surprised if you don't rank on the first page.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdW9DIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7aff266fa51783ebde738f39d89c83e20826ba56/unnamed%20(3).png" alt="Time to interactive metric" width="894" height="507">
<h2><img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdXNDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--09bc2982c3bc0a9123b6bc0ec86e6812cef8d9a1/unnamed%20(4).png" alt="Time to interactive metric" width="892" height="237"></h2>

<h2>How to optimize TTI and TBT</h2>
As you can see, these indicators are interconnected. Therefore, you can optimize the application for both at once.&nbsp;
<ul>
<li style="font-weight: 400;" aria-level="1">You should reduce the impact of libraries that are being loaded and processed at that time. For example, Google Analytics. It is often forgotten to turn it off when the business no longer needs it.</li>
<li style="font-weight: 400;" aria-level="1">All blocks that do not have the highest priority for the user, and are not on the first screen, can be loaded dynamically via lazy loading, as well as imported dynamically.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Minimize the duration of the main thread. If you have a lot of different animation &ndash; you should not place them on a large number of layers. In order for your browser to understand at all that you want to animate some elements, you should add the will-change CSS property to them. The browser will already notice that this is an animation, but it will be easier for it to find such elements, which will speed up loading. Don't forget to use debounce for your event handlers. Styling inputs inside event handlers also loads the main thread very heavily. Try not to do it.</li>
<li style="font-weight: 400;" aria-level="1">Decrease the Javascript timeout so that it takes less than 2 seconds. This is easy to do by avoiding unnecessary renderers. Try to keep your event handlers as simple as possible. For example, don't write inside the if-else handler, use different handlers for different conditions inside the if-else. Split your code and try to diminish the bundle size.</li>
</ul>

<h2>First Contentful Paint &lt;3s</h2>
The first thing a user sees on a page when it loads. According to Lighthouse, it can be any image, not a white &lt;canvas&gt;, as well as SVG elements on the page. The important thing is that everything inside the iframe is not counted. It's also text, and therefore fonts, so make sure they're displayed. Add a property font-display: swap; to your @font-face. This is the fastest way to resolve the issue.

<h2>Largest Contentful Paint &lt;2.5s</h2>
This is the largest element in the viewport. Usually, people are used to thinking that this is an image because often the biggest element on the first screen is the cover image or image slider, but this is not always the case. For example, this is the h1 heading on <a href="https://fasterthanlight.me/" target="_blank" rel="noopener">our website</a>.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdXdDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ae9464e13b221baefda2ba3749d54a02fac17aa5/unnamed%20(5).png" alt="Faster Than Light website" width="894" height="856">
LCP can be:
<ul>
<li style="font-weight: 400;" aria-level="1">&lt;img&gt; elements, including Next.js &lt;Image&gt;</li>
<li style="font-weight: 400;" aria-level="1">Block element with text. Text can be not only symbols but also any inline elements, for example, emojis.</li>
<li style="font-weight: 400;" aria-level="1">&lt;image&gt; inside SVG &ndash; they should be large enough and it is better not to do this at all, but as an option &ndash; it is possible.</li>
<li style="font-weight: 400;" aria-level="1">background-image inside CSS, which is specified via url(&ldquo; &ldquo;) </li>
</ul>
They all can be optimized to increase Next.js performance.&nbsp;
<h2>How to improve the LCP performance</h2>
<ul>
<li style="font-weight: 400;" aria-level="1">Upload the main image in advance</li>
<li style="font-weight: 400;" aria-level="1">Optimize all your images (tinyPNG, SVGOMG, etc.)</li>
<li style="font-weight: 400;" aria-level="1">Optimize fonts</li>
<li style="font-weight: 400;" aria-level="1">Optimize CSS</li>
<li style="font-weight: 400;" aria-level="1">Optimize Javascript on the client.&nbsp; </li>
</ul>
Use these best practices (as well as Next.js best practices) to improve your performance.&nbsp;

<h2>Cumulative Layout Shift &lt;0.25</h2>
Have you ever visited a site, clicked on any button or product, and as a result, another element appeared on the top? And it turns out that you clicked on a completely different block or even on an advertising banner? Users do not like this and Google, accordingly, too. Block size jumps like this increase the value of the CLS factor, which is bad for performance.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdTBDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8435fc27072b835a7f3ec6243ec9e4e9ae28cec8/unnamed%20(7).png" alt="cumulative layout shift" width="889" height="398">
<h2>How to avoid and reduce the CLS:</h2>
<ul>
<li style="font-weight: 400;" aria-level="1">Reserve space and set a fixed height for blocks that will be loaded dynamically. Or you can use skeleton to improve your UX even more.</li>
<li style="font-weight: 400;" aria-level="1">Track which device the user came from to show him the correct blocks of the correct size right away. You can do this in native ways with cookies, or you can use ready libraries.</li>
</ul>

<h2>Let&rsquo;s hack it: Use documentation to help</h2>
The easiest way is to read carefully the Next.js documentation, which developers update periodically. There you can find out that:
<ul>
<li style="font-weight: 400;" aria-level="1">By adding the "priority" property to the next &lt;Image/&gt; you can improve the value of the LCP</li>
<li style="font-weight: 400;" aria-level="1">All links in next.js have prefetch=true by default. Thus, next trying to preload information for pages on the links. But it takes time and resources. Set prefetch=false to at least those links that users rarely click on, such as the privacy policy.</li>
<li style="font-weight: 400;" aria-level="1">You can change the script loading order for the &lt;Script/&gt; component yourself using the strategy property. It can take the values beforeInteractive (for bot detectors, cookies confirmation), afterInteractive (tag managers, Google Analytics), lazyOnLoad (social media widgets, chats support).</li>
</ul>
This will help you improve next.js performence, too.&nbsp;
<h3>Bundle master</h3>
Next.js bundle analyzers make it easier to keep track of the bundle size, so use these several tools:
<ul>
<li style="font-weight: 400;" aria-level="1">Import Cost is an extension for VS Code that tells you how much each imported element takes.</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://packagephobia.com/">Package Phobia</a>/<a href="https://bundlephobia.com/">Bundle Phobi</a>a are services that will show how much your library has, what libraries it pulls along with it, and also what other analogues you can use.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer">Webpack Bundle Analyzer</a> is a webpack plugin, which visualizes the look of your bundle, showing its structure. A tutorial on how to use it can be found <a href="https://flaviocopes.com/nextjs-analyze-app-bundle/">here</a>.</li>
</ul>
&nbsp;
<h3>Shallow Routing</h3>
There is such an interesting feature in Next.js as shallow routing. This is one of the options you may see when using router.push or router.replace. The default is false. But if set to true, then the whole page will not be reloaded when the URL changes and getServerSideProps will not work and will not load new data again. Be careful, the rerender may not be noticeable in local development, but it will definitely show up in production. If you're using filters based on URL query parameters, it's better to track that the URL has changed and load the data in useEffect again just for the desired block.&nbsp;
&nbsp;
<h3>SWR &ndash; what is and where</h3>
Use SWR to load data on the client instead of useEffect. It was specially created by Next.js. It automatically caches and revalidates data, and also allows you to request data from the server at regular intervals.&nbsp;
<h3>Mobile Detect</h3>
There are times when you need to load different components depending on the width of the window. If you use conditional rendering and hooks like useWindowSize for this, rather than CSS styles, FCP loading may differ from the final result. In this case, the CLS will be huge, and the user will see a very jumping page at the beginning. This can be avoided if you determine which device and what sizes the user uses on the Next.js server. Package <a href="https://www.npmjs.com/package/mobile-detect">mobile-detect </a>will help you a lot with this and will allow you to reduce CLS to zero.
<h3>The most cheating and effective hack</h3>
To significantly improve the FCP and LCP values, and with them the rest of the indicators, you need to replace the NextScript import in the custom document _document.js/.ts. Replace it with <a href="https://gist.githubusercontent.com/bravetheheat/d0eeb93c15d689d769b3194629ce36ab/raw/f570d6488b5cdbca59e755881b42080946103620/DeferNextScript.tsx">this file</a>, which have been posted by incredible <a href="https://gist.github.com/bravetheheat/">David Zhao</a>. This hack saved me when I was struggling with huge FCP and LCP stats for days and added about 30 points to my Lighthouse Performance score.&nbsp;
But we will not mindlessly copy-paste, so I will briefly tell you how it works. Remember how we usually load scripts using pure JS, HTML, CSS? We add them either in the head before the body, or at the end. Only in this case, we already have some kind of layout, the elements are mostly displayed, but interactivity is achieved through JS. So we can afford asynchronous loading of scripts after layout.
However, when we use frameworks like Next.js, we have JS that creates the entire page. That is to say, the script will always be in the head. But inside it also loads the scripts of the libraries, Next.js itself. We saw above that we can change the way some scripts are loaded using the Script component. But with internal scripts and node modules, this will not work.
By default, NextScript loads scripts onto the page using the async property. Thus, HTML is parsed first and the script is loaded. Then you have to wait until the script completes and only then continue parsing HTML.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdklDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--75030bbb3da6332f25def58cdc51884243af3d8f/unnamed%20(8).png" alt="async property" width="884" height="374">
If we use the defer property, then we get a situation where HTML is parsed first and scripts are asynchronously loaded in parallel, but we do not have to wait until they work to finish parsing HTML. Since most of the scripts are really not needed for the first render, this makes the page loading much faster.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdkFDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f241ff676c4f5346eace9abd7cd901e63b2ebdb4/unnamed%20(9).png" alt="defer property" width="879" height="440">

<h2>Conclusion</h2>
In today's world, product's UX plays a huge role for the sucess of business as users tend to choose brands that are easthetic, fast and friendly to them. That's why any business owner should focus most part of the efforts on how improving their product's performance to make interaction experience seamless and enjoyable.&nbsp; That's what we root for<a href="https://fasterthanlight.me/projects" target="_blank" rel="noopener"> any product</a> we create &amp; encourage our partners &amp; readers integrate in their business development strategies. Great performance is your strength, don't neglect it.&nbsp;

Increasing Performance in React/Next.js apps for Google Lighthouse

A brief overview of OKR framework that helps to set up objectives(goals) that really matter and It could be used at the corporation/company level or event for your personal life

OKR stands for Objectives and Key Results - OKR Approach Overview

OKR is a framework that helps to set up objectives(goals) that really matter for you/company and define concrete measurable steps(key results) to achieve objectives.
It could be used at the corporation/company level or even for your personal life.
Let's dive into it.
OKR was introduced in the 1970s by Andrew Grove and later picked up by such companies as Google, LinkedIn, Zynga, Twitter, Microsoft, GitLab, and many others.

<h2 style="text-align: justify;">OKR Concepts</h2>
Objective.
An objective is a clear statement of what you want to achieve.
&nbsp;

<h2 style="text-align: justify;">Key Results:</h2>
Measurable success criteria. Their purpose - definitely say if the objective has been achieved or not.
&nbsp;
Interesting that framework rules are different for each company and it is a continuous process of self-improvement.
You have to define your framework rules and overview them after some period of time.
Some general requirements(could be customized by your needs):
- Specify Time Period: Quarter/Year - Define 3-5 high-level objectives for the company(O). - For each objective define 3-5 measurable results(KRs). - At the end of the time period, each key result could be 1 or 0. - Objective is completed when KeyResults rate &gt; 75% - If the objective was completed by 100% - your objective was not enough ambitious.
&nbsp;
Sample 1:
Objective: Enhance your communication with customers
Key Results:
- Host 7 webinars related to your product/service. Ensure that the webinars have at least 50 participants. - Release 5 new press publications twice a week. - Create a design book for all your assets - Increase your community size from 3000 to 5000
&nbsp;
Sample 2:
Objective: Get Prepared for the AWS Certification
Key Results:
- Go through the Udemy course - Read AWS whitepaper documents - Pass 7 test exams with a rate &gt; 80% - Complete 20 hands-on labs
&nbsp;
Sample 3:
Objective: Lose weight by 10kg
Key results:
- Avoid sugar - Complete 30 workout sessions at the GYM - Run/walk 100km/20 hours
&nbsp;
Sample 4:
Objective: become a better father for your kids
Key results:
- Take them to a coffee shop, buy their favorite donuts with chocolate - Go fishing with your son - Buy an LoL doll for your daughter - Read an interesting book together

<h2 style="text-align: justify;">OKR Pros:</h2>
- Focus on priorities - Defined steps(roadmap) - Transparent indicators - Concentrate company resources on the most valuable goals
When you're starting your working quarter/month/week/day you will always know what your real goals are

<h2 style="text-align: justify;">OKR Cons:</h2>
- OKRs should be approved on the company's high level - Avoid using OKRs as a control Instrument - To many Objectives will bring a chaos - Without a global goal - key results are nothing - Requires activities and time (brainstorming, planning, 1 on 1 check-ins etc ) - Requires company flexibility

<h2 style="text-align: justify;">How to manage OKR</h2>
1. Intro(Icebreaker)
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdVVFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1a26df53a4aeda6cbaacb3c27b282a18d33732c1/unnamed.png" alt="OKR Intro " width="573" height="756">
-make a team meeting/call -get your team members familiar

2. Define Objectives
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdVlFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e1ecb7c6d0771113b32ac1d9c3f8952fdbde266/unnamed%20(1).png" alt="Objective in OKR approach" width="595" height="527">
- brainstorm objectives - write down the most valuable

3. Key Results
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWNFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e8e0944ed8750013a22aedd731baf7c731ce034f/unnamed%20(2).png" alt="OKR approach - key results" width="589" height="460">
- brainstorm key results for each objective - write down the most valuable

4. Overview
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWdFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7312a7920165f26c3736248565689295df8aef23/unnamed%20(3).png" alt="okr overview" width="790" height="350">
Create a diagram/visualization of your objectives and key results.

<h2 style="text-align: justify;">Best practies:</h2>
1. Less is more (define a small set) 2. Crawl-walk-run (start from pilot team(s) than scale) 3. Outcomes, not output (focus on Result, not on Amount of delivered work) 4. OKRs are not everything 5. The only way to learn OKRs is to do OKRs.
I wish you to set up ambitious objectives and always reach them! Find out more about what OKRs we set for <a title="case study page" href="https://fasterthanlight.me/projects">each project</a>.&nbsp;

OKR stands for Objectives and Key Results

Explore the top 5 Fintech security threats and risks in our comprehensive guide. Stay informed and safeguard your financial technology initiatives against potential vulnerabilities for a secure and resilient future. 

5 Most Common Fintech Security Threats And Risks - Detailed Overview

In recent years, the global economy has become a victim to the butterfly effect. In response to the pandemic, quarantine, and lockdown, the use of cash has declined, and the volume of e-commerce has grown, along with the number of fraudulent attempts and security threats that are relevant to both eCommerce businesses and financial services.&nbsp;
 In this article, we&rsquo;ll take a look at the primary security threats in fintech and ways to effectively deal with them. Remember, awareness is the first step towards effective protection.&nbsp;

<h2 dir="ltr">Top 5 Fintech Security Threats Taking Shape</h2>
Below are some of the most essential fintech risks to take into account and develop backup response strategies in advance.&nbsp;
<h3 dir="ltr">1. Mobile payment apps vulnerabilities</h3>
The use of mobile payment applications<a href="https://www.marketwatch.com/press-release/mobile-payments-market-statistics-covid-19-pandemic-impact-future-plans-competitive-landscape-and-trends-by-forecast-2023-2021-01-08"> is on the rise</a> against the backdrop of the pandemic. Well aware of this trend, fraudsters are constantly searching for opportunities to hack mobile apps and get users&rsquo; data.&nbsp;
The only way to protect your business and your users from this fintech security threat is to keep your application updated and compliant with the industry-accepted security practices. For instance:
<ul>
<li dir="ltr" aria-level="1">
Make sure your online payment application employs the recent technologies on its back-end part;
</li>
<li dir="ltr" aria-level="1">
Keep your app updated and be attentive with each new version launch - more versions and updates mean more potential security loopholes and bugs;
</li>
<li dir="ltr" aria-level="1">
Make sure you are using 3D Secure. This is a financial data protection practice that improves the safety of users&rsquo; credentials;
</li>
<li dir="ltr" aria-level="1">
Validate your users with the opportunity to use biometric authentication such as fingertip and Face ID.&nbsp;
</li>
<li dir="ltr" aria-level="1">
Always use two-factor authentication via one-time generated codes, QR codes, and SMS.&nbsp;
</li>
</ul>
<h3 dir="ltr">2. Human Neglect</h3>
<a href="https://www.kaspersky.com/blog/the-human-factor-in-it-security/">According to Kaspersky</a>, one of the leading anti-virus software providers, the human factor is one of the most crucial IT fintech security threats that comes from within.&nbsp;
For example, Wanna Cry 2017 ransomware attack happened just because of human neglect - the malicious algorithm was randomly looking for the IP addresses that don&rsquo;t use the Transmission Control Protocol 445, then it tested them for one more vulnerability, and infected with black door Double Pulsar. It, in turn, blocked access to information and demanded payment in cryptocurrency for unblocking it.&nbsp;
This is only one of the possible examples, however, the scale of the human factor as one of the leading threats in financial services is much greater. According to the <a href="https://financialservicesblog.accenture.com/cybercrime-in-banking-and-capital-markets-technology-and-human-vulnerabilities">Accenture research</a>, three-fourths of financial companies have experienced fintech security issues as a result of human-related incidents.&nbsp;
According to the <a href="https://www.kaspersky.com/blog/the-human-factor-in-it-security/">Kaspersky survey</a>, 52% of businesses believe they also have security threats in financial services that come from within. This research has also shown the main issues that may happen because of the human factor:
<ul>
<li dir="ltr" aria-level="1">
inappropriate data sharing using mobile devices (for example, sending credit card credentials via instant messengers or social media);
</li>
<li dir="ltr" aria-level="1">
physical loss of mobile or portative devices used for job-related purposes. In the case <a href="https://www.welivesecurity.com/2020/06/23/most-remote-employees-use-personal-laptops-work/">employees are using personal devices</a>, this&nbsp; fintech risk increases even more&nbsp; - and this is just the case we may observe because of the sharp with to remote working provoked by the pandemic);
</li>
<li dir="ltr" aria-level="1">
incidents related to the connected devices usage and data breaches because of the breach on the third-party company the employees have share data with.&nbsp;
</li>
</ul>
Thus, this security threat in fintech is quite serious. What&rsquo;s more, it can sometimes be unobvious and unpredictable, so below are the best practices to eliminate it:
<ul>
<li dir="ltr" aria-level="1">
Educate your employees on the importance of data protection since a lot of people still consider the data breach will never happen to them personally or are just unaware of the necessity of the data protection practices;
</li>
<li dir="ltr" aria-level="1">
Use human error prevention tools. For example, <a href="https://nightfall.ai/">Nightfall</a> is an AI-powered solution that tracks the behavior of the employees and the ways they deal with data and allows for setting custom actions to prevent a potential vulnerability - for example, automatic deletion of the message with valuable data.&nbsp;
</li>
<li dir="ltr" aria-level="1">
Try to supply your team with the devices that will be used for the work-related tasks exclusively. Restrict social media and instant messengers usage on these devices, plus equip them with the app that will allow for remote data management, control, and deletion in case the device is lost or stolen. For example, <a href="https://drivestrike.com/">Drive Strike </a>may be an option. If the usage of personal devices is inevitable, then go back to the first point.
</li>
</ul>
<h3 dir="ltr">3. Payment fraud and identity theft</h3>
Payment fraud and identity theft are fintech security concerns that go hand-in-hand. As a rule, identity theft precedes payment fraud. These are two of the most common types of fraud, especially relevant because of the pandemic, the rise of eCommerce and financial services usage it provoked, and the increased use of social media.&nbsp;
Fraudsters often find it very easy to find out the users&rsquo; personal data and identity details from their social media profiles and enter or guess the passwords (65% of users <a href="https://www.helpnetsecurity.com/2019/11/12/password-reuse-problem/#:~:text=The%202018%20Global%20Password%20Security,for%20multiple%20or%20all%20accounts.">have the same passwords</a> for multiple devices and accounts, so this isn&rsquo;t a difficult task) to get access to the payment app.
Artificial intelligence and machine learning solutions are the most effective tools to deal with fintech security risks like payment fraud and identity theft. Their data analysis features detect anomalies in users behavior to conclude the legitimate or fraudulent nature of each transaction. Since weak passwords are the reason behind <a href="https://www.idagent.com/blog/10-password-security-statistics-that-you-need-to-see-now/#:~:text=In%202019%2C%2042%25%20of%20companies,reuses%20each%20password%2014%20times!">81% of hacking-related breaches</a>, using such solutions as <a href="https://1password.com/ru/">1Password</a> or <a href="https://www.lastpass.com/">Last Pass</a> makes sense as well.&nbsp;
<h3 dir="ltr">4. Money laundering</h3>
Money laundering is one of the most serious security threats in financial services slowing down economic growth. According to research, <a href="https://www.europol.europa.eu/crime-areas-and-trends/crime-areas/economic-crime/money-laundering">2-5% of global GDP</a> is laundered each year. It&rsquo;s especially dangerous for systems that are completely digital and have lightweight algorithms for verifying identity and the authenticity of transactions.
In this case, a trained machine learning algorithm may be quite effective. As well as with payment fraud detection, an ML-powered system is able to find behavior patterns that may be a sign of money laundering, and block such transactions.&nbsp;
<h3 dir="ltr">5. Data breaches</h3>
According to Forbes, usage of fintech mobile apps increased by <a href="https://www.forbes.com/sites/simonchandler/2020/03/30/coronavirus-drives-72-rise-in-use-of-fintech-apps/?sh=6f9ee7bc66ed">72% during the pandemic</a>. eCommerce sales increased <a href="https://www.roirevolution.com/blog/2021/02/coronavirus-and-ecommerce/">by 27%</a> in recent years. Users began to generate more data, thereby creating security loopholes that fraudsters may benefit from. Online fraud also increased significantly against the backdrop of the pandemic. When taking the combination of these factors into account, breach of fintech app security becomes the most serious security threat in fintech.&nbsp;
That&rsquo;s why protection from data breach risks should be strategic and ongoing. Below are some of the most effective practices:
<ul>
<li dir="ltr" aria-level="1">
Use AI-powered data protection tools;
</li>
<li dir="ltr" aria-level="1">
Make sure all the passwords you and your employees use are unique, they don&rsquo;t repeat each other across the different accounts, and are frequently updated;
</li>
<li dir="ltr" aria-level="1">
Use secure cloud storage with the opportunity to encrypt your data and have a backup of all the important information to quickly restore business operations in the case of successful attack.&nbsp;
</li>
</ul>

<h2 dir="ltr">Conclusion</h2>
There are quite a lot of fintech security concerns that financial companies and banks must deal with. However, powerful data and financial app security solutions have also arisen to make detecting and preventing security threats easier.&nbsp;
What&rsquo;s more, a customized solution developed for your specific business may promise even more effective protection compared to the ready-made ones.
The Faster Than Light team is glad to offer our technical expertise to create an anti-fraud and security defense application for your financial business.&nbsp;
&nbsp;

5 Most Common Fintech Security Threats And Risks You Should Be Aware Of

Read a detailed overview of how tax changes in Section 174 lead to US tech layoffs, what to expect in 2024, and why outsourcing a software vendor is a solution.

What to Expect from Section 174: More US Tech Layoffs Coming, Abroad Software Vendors are Back in Game

More US tech layoffs are coming or why abroad software vendors are a way out for tech startups: nitty-gritty of Section 174

Read a detailed comparison of Flutter vs Native Development, their unique features, pros, and cons to choose what suits your business goals most. 

Flutter vs Native Development: Step-by-step Comparison

Today, when it comes to mobile development, you have many choices. There are various programming languages and frameworks to pick from. This often leads to debates about which option is best for creating digital mobile products.
The main question is whether to use cross-platform frameworks or stick with native methods while creating a mobile app. The answer is simple &ndash; both options work just fine. However, the feasibility of using native technologies is primarily determined by how many resources project owners are willing to invest in the digital product and what requirements, specifics, and needs for IT solutions are set.
So, let's compare two most popular mobile development approaches, Flutter vs Native, and figure out which one is the better choice for you.
<h2 dir="ltr">Flutter Development: Overview</h2>
Flutter is an open-source framework created for cross-platform software development that allows building beautiful, natively compiled, multi-platform applications from a single codebase. The framework is based on the Dart language and created and supported by Google.
Among Flutter's strengths are its native performance, modularity, and fast development speed, making it a trusted choice among developers worldwide.&nbsp;
While we are focusing mainly on Flutter in this article, it's crucial to remember that there are other cross-platform frameworks widely used by developers. These Flutter alternatives include .NET MAUI (Xamarin), React Native, and Ionic. They definitely have their own pros and cons, which are defined by the specifics, goals and requirements set.
Yet, in this article, we decided to focus on Flutter as it's a much more popular framework than its cross-platform alternatives today. Thus, over <a href="https://flutter.dev/ecosystem">1M apps were created with Flutter</a>, while around <a href="https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/">46% of developers</a> in 2022 used Flutter to create cross-platform applications, giving it a lead of nearly 14% over its closest competitor.
<h2 dir="ltr">About Native App Development</h2>
Native development has a somewhat different approach than cross-platform frameworks. It involves using specific and separate SDKs and programming languages like Kotlin and Java for Android or Swift and Objective-C for iOS. Essentially, you need to create two separate mobile applications for Android and iOS, which can be somewhat more expensive and time-consuming.
The main advantage of native development is its high performance and the ability to fully utilize the platform's features. However, the downside is the complexity of porting the app to another platform due to differences in commands.&nbsp;
<h2 dir="ltr">Let's compare: Flutter and Native Development</h2>
So, let's look more precisely at how Flutter and Native Development are different and which one to choose for your project. For this, we will also look at the frameworks and their programming languages &ndash; Dart, Swift, Kotlin &ndash; to compare them from as many aspects as possible.
<h3 dir="ltr">1. Performance</h3>
When it comes to native development, no framework can match their application productivity on devices. Kotlin-based apps will perform better on Android, while apps created with SwiftUI will have maximum speed on iOS.
On the other hand, Flutter uses a rendering mechanism to interpret code during runtime on devices, somewhat reducing their productivity. Nevertheless, the framework is actively improving and narrowing the gap between itself and native technologies. For example, developers are already planning to revamp support for multiple Flutter views in 2024, with a focus particularly on iOS and Android, as well as to introduce compatibility with modern AI frameworks.
<h3 dir="ltr">2. Speed&nbsp;</h3>
Regarding development speed, native frameworks and programming languages significantly lag behind Flutter. More precisely, during native development, it is necessary to create two separate iterations of programs for Android and iOS, either by allocating a budget to hire two teams or spending time on sequential implementation.
In contrast, Flutter has a single codebase, as well as a hot reload feature (displaying changes without fully reloading the application) and a widget library for quickly creating and customizing UI. All of this accelerates both app development directly and their adaptation to different systems.
<h3 dir="ltr">3. Features &amp; Documentation</h3>
Flutter has an active community and comprehensive documentation that can help solve basic and fairly complex issues.&nbsp;
Right now, Flutter also <a href="https://flutter.dev/ecosystem">boasts</a>:&nbsp;
<ul>
<li dir="ltr" aria-level="1">
155k Stars on GitHub
</li>
<li dir="ltr" aria-level="1">3rd most OSS GitHub contributors</li>
<li dir="ltr" aria-level="1">
240k Followers on Twitter
</li>
<li dir="ltr" aria-level="1">
175k Members on Meetup
</li>
</ul>
Unlike native frameworks, where the community is less communicative and loyal, and the documentation is usually too complex to quickly search for necessary information.
Regarding features, Flutter is also ahead, as it offers capabilities such as a layout editor, hot reload, and a widget library. Thus, Flutter offers over 20,000 packages, plugins, and integrations for custom UI components, authentication solutions, state management libraries.
<h3 dir="ltr">4. Usage &amp; Popularity</h3>
As we've already mentioned Flutter turns out to be one of most popular cross-platforms solutions. For example, search queries with the framework name Flutter were at least twice as high as Kotlin queries and nearly four times as high as SwiftUI queries in 2023, according to <a href="https://trends.google.com/trends/explore?q=Flutter,Kotlin,SwiftUI">Google Trends</a>. Additionally, Flutter has a significant presence on GitHub (where both professional developers and enthusiasts gather), with nearly <a href="https://github.com/search?q=flutter&amp;type=Repositories">650,000 repositories</a>.
Major companies like Alibaba, BMW, eBay, Square, Groupon, and CapitalOne trust and use Flutter. This indicates the popularity of the framework and the trust in it by corporations.
As for the native development, this method is mostly used by the developers of the Android (Google) and iOS (Apple) platforms, so the most interesting examples of applications can be seen in stock solutions. Regarding third-party applications, they are most often developed using cross-platform frameworks because it is easier than building separate versions of mobile apps.
<h3 dir="ltr">5. Code maintenance</h3>
The best thing about Flutter is that it has a single codebase, which significantly simplifies and speeds up the application maintenance process. Unlike native technologies that require changes to be made in each app version, in Flutter, you can simply edit the code, add new features or integrations, and save the changes immediately for all iterations of the application.
Moreover, the hot reload feature will also reflect the changes made in real-time. It is convenient, efficient, and innovative.
With native frameworks, it's necessary to separately maintain each mobile application version. This increases support costs and is less efficient than cross-platform technologies with a single codebase.
<h3 dir="ltr">6. UI components</h3>
As we've already mentioned Flutter has a powerful widget library and composition tools for rapid prototyping and customization of the app's interface.&nbsp;
As for native development, a separate design is implemented for each version of the mobile app. Additionally, stock SDKs do not have built-in generative functions. This somewhat increases the time it takes to create interface elements and effectively prevents compatibility (reducing the UX for the audience transitioning between systems) between apps for different platforms.
<h3 dir="ltr">7. Testing &amp; Integration&nbsp;</h3>
Speaking of testing and integrations, it's worth noting that when developers create apps using native SDKs, they usually need to use additional tools like Selenium, JMeter, and Postman for testing. However, Flutter comes with its own set of tools for testing and integration, such as Flutter driver for automated testing and Flutter CI for continuous integration and deployment.
<h3 dir="ltr">8. Cost of development</h3>
On average, the cost of development with Flutter is lower than that with native frameworks. Since it has a single codebase and interprets commands directly during the application's operation in the system, fewer resources might be used for its development. That is, less time, effort, and specialists are required.
For native development, a larger team (sometimes meaning more time) is required, along with quite specific skills. Also, additional resources are required to support and modernize apps, which is not always a cost-effective solution. 
<h2 dir="ltr">Flutter vs Native: Nubank case</h2>
Let's look at Flutter through the prism of a real application and for this let's take the <a href="https://flutter.dev/showcase/nubank">case of Nubank</a>. The goal of the Nubank team was to identify optimal frameworks for migrating the application to cross-platform solutions instead of using native technologies. Theoretically, this was supposed to reduce deployment time and lower maintenance costs. In practice, they achieved the desired result simply by comparing the potential of Kotlin Native, React Native, and Flutter. Switching to Flutter led to a 30% improvement in success metrics and a 600% faster deployment of new mobile app iterations.
And how about creating and releasing a life insurance feature in just three months? Such mobility is exactly what the Nubank team has been able to achieve after switching to Flutter.
<h2 dir="ltr">Could Flutter Eventually Replace Native Development?</h2>
Given Flutter's rapid development, expanding capabilities, and narrowing gap with native technologies, it could potentially replace Kotlin and SwiftUI in the future. While it's not yet as productive as native solutions, even iOS and Android developers are enhancing their platforms for better technology compatibility.
In the next five years, the industry will see significant changes due to AI integration, like Copilot, transforming development processes. This might positively impact Flutter, making it the go-to solution for app development.
<h2 dir="ltr">Wrap up</h2>
We can state that Flutter is not yet a cure for all business needs but is on the right path. You can use its potential to present your digital product quickly and vividly to a broad audience, regardless of the devices they use.
Flutter offers an affordable way to enter the market, ensuring almost native performance and a high level of UX.
However, native development still maintains its market share, as it is indispensable when it is necessary to implement a high-performance mobile app with maximum compatibility between the application code and the OS functionality. So, if you want to launch your product,&nbsp;<a href="https://fasterthanlight.me/contact-us">consult with FTL experts</a>. We will guide you on where to start, what to focus on, and how to develop a digital solution.
&nbsp;

Read why generating 6-digit code for SMS authorization using sprintf() method is essential and what can go wrong applying ordinary range approach  

Generating 6-digit code for SMS authorization using sprintf() method  

&nbsp;
The simplest and most obvious bugs are the trickiest ones. That was the case on my recent project where the task was simple as it might seem - to generate a random 6-digit code for SMS authorization.&nbsp;
The simple and easy solution here would be to use a range method with diapason from <code>000000 to 999999</code>. That&rsquo;s the one I went with. Taking into account the practicality and simplicity of the approach chosen, we didn&rsquo;t prepare the additional tests to run the feature through. And that, actually (surprise, surprise), played the joke with us.
So, already at the production stage &ndash; when a lot of people tried to complete the registration &ndash; we bumped into the undesired bug. We&rsquo;ve noticed that in some cases the length of the code generated was shorter than expected. Not a very neat situation for production.&nbsp;
So, why did it happen?
It&rsquo;s, actually, simple as it is &ndash; we didn&rsquo;t consider that <code>000000 == 0</code>, so the generation was done incorrectly. To fix it, there were two ways: either to change diapason from <code>&nbsp;000000 to 100000</code> or to use <code>sprintf'%06d'</code> method. We&rsquo;ve preferred the latter.
What is <code>sprintf('%06d', rand(1..999999))</code> method? '<code>%06d</code>' is a format that ensures that string must be 6-character long, so it adds up nulls, if the number that goes as the second argument is of a shorter length. The main difference between <code>(100_000..999_999)</code> range and <code>sprintf('%06d', rand(1..999999))</code> is that sprintf returns the line that does not pass the requirements.
To sum up, this case shows us how important it is to write tests for all critical parts of the product, even if we&rsquo;re talking about the simplest and most obvious features. It&rsquo;s much better to detect and fix them before going to production. And most importantly, don&rsquo;t forget to acknowledge your failures, embrace and learn from them.&nbsp;

Learn the essentials of Apple Vision Pro Development, what it takes to build and design Vision Pro app, and the development costs

Apple Vision Pro Development: Comprehensive Guide for Developers

Explore a detailed overview of functionality, tech requirements, and costs needed to develop successful healthcare web applications 

Our blog