10%

Try : Insurtech, Application Development

Edtech(5)

Events(34)

Interviews(10)

Life@mantra(11)

Logistics(1)

Strategy(14)

Testing(8)

Android(46)

Backend(29)

Dev Ops(3)

Enterprise Solution(22)

Frontend(28)

iOS(41)

Javascript(13)

Augmented Reality(17)

Customer Journey(12)

Design(13)

User Experience(34)

AI in Insurance(31)

Insurtech(59)

Product Innovation(37)

Solutions(15)

E-health(3)

HealthTech(8)

mHealth(3)

Telehealth Care(1)

Telemedicine(1)

Artificial Intelligence(109)

Bitcoin(7)

Blockchain(18)

Cognitive Computing(7)

Computer Vision(8)

Data Science(14)

FinTech(44)

Intelligent Automation(26)

Machine Learning(46)

Natural Language Processing(13)

React 18: From A Developer’s PoV

React 18, the much-awaited version of React is out with exciting features like automatic batching, a new API –startTransition, and streaming server-side rendering with support for Suspense. What’s so special about this newer version is its unique “concurrent rendering” method. In the earlier versions of React, the rendering process was synchronous and non-interruptible where the UI would lock during long render processes and not respond to user input instantly. Using React 18, the rendering process can be made asynchronous and can be interrupted, paused, resumed, and even abandoned enabling developers to create a more fluid user experience.

How to update from React 17 to React 18?

React 18 is currently released in alpha and can be downloaded using the command 

image2.png

A component is usually rendered like this

image4.png

However, to utilize the latest features, components need to be rendered like this:

image3.png

What’s there in React 18?

Automatic Batching

Automatic Batching is the rendering that occurs at the same time whenever triggered to update with multiple states at once. The previous version of React could only batch updates inside React event handlers. If the multiple state updates are triggered by a promise or a callback, their responses are not rendered at the same time. But with React 18, all renders are batched, meaning they’ll occur at the same time, regardless of their trigger.

image12.png

Here’s an example with a promise:

image5.png

Suspense

With Suspense, React 18 makes major performance improvements to SSR by making serving parts of an app asynchronously possible. Suspense helps in specifying what React should show when a part of the tree isn’t ready to render. For instance, in case there are four components: a Header, a Sidebar, a Banner component, and the Main component. If all four of them are stacked on each other like this 

image9.png

Then, the server would try to render them at once, slowing the entire page down. If the Header, the Sidebar, and the Main are more important for the readers, one can prioritize these over the Banner by wrapping the Banner component in Suspense tags:

image6.png

As a result, the server would first serve the Header, Side Bar, and Main component, and then a spinner would be displayed while the Banner waits to load.

Transitions

React apps are interactive, however, to make an app update itself as people interact with it, constant updating might cause the app to slow down significantly and give a poor user experience. Transition is a new React feature that differentiates between urgent and non-urgent updates. Transition updates transform the UI from one view to the next.

  • Urgent updates are the direct interactions like typing, clicking, pressing, etc., that need immediate response to match one’s intuition about how physical objects behave. Otherwise, they feel “wrong”. However, transitions are different because the user doesn’t expect to see every intermediate value on the screen. 

Single-user input should typically result in both an urgent and a non-urgent update for the best user experience. StartTransition API can be used inside an input event to tell React which updates are urgent and which are “transitions”.

image8.png
  • Non-urgent updates are wrapped in ‘startTransition’ and would get interrupted if more urgent updates, such as clicks or keypresses, emerge. If a user interrupts a transition (for example, by typing multiple characters in a row), React will discard any stale rendering work and render only the most recent update.

New Hooks

  1. UseId

useId is a new hook for creating unique IDs on both the client and the server while avoiding hydration mismatches. It’s most beneficial for component libraries that need to integrate with accessibility APIs that require unique IDs. This addresses a major problem that existed in React 17 and in its previous versions, but it’s even more critical in React 18 because of how the new streaming server renderer delivers HTML out-of-order.

image10.png

 

  1. useTransition

‘useTransition’ and ‘startTransition’ would allow marking some state updates as not urgent. By default, other state updates are considered urgent. React would allow urgent state updates (for example, updating a text input) to interrupt the non-urgent state updates (for example, count results).

image11.png

 

  1. useSyncExternalStore

‘useSyncExternalStore’ is a new hook that enables external stores to support concurrent reads by forcing updates to the store to be synchronous. It eliminates the necessity for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with a state external to React.

image7.png

 

  1. useDeferredValue

‘useDeferredValue’ helps to delay re-rendering a non-urgent part of the tree. It works in the same way as debouncing, although it offers a few advantages. React will attempt the deferred render directly after the initial render is reflected on the screen because there is no predetermined time delay. The deferred render is interruptible and doesn’t block user input.

image13.png

 

 

  1. useInsertionEffect

‘useInsertionEffect’ is a new hook that allows CSS-in-JS libraries to address the performance difficulties of injecting styles in the render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will activate after the DOM is mutated, but before layout effects read the new layout. useInsertionEffect is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate the layout.

image1.png

Conclusion

With the introduction of React 18, there has been a drastic change in the world of web applications because of its unique offerings like concurrent mode and server-side rendering. The latest feature would make it easier to develop and maintain a code as well as make apps faster and more responsive to user interactions.

About the author:

Manikandan is a Technical Lead at Mantra Labs working on React/Angular-related projects. He is interested in learning about stock analyst trading algorithms, and in his free time, he loves to swim, cook, and play cricket and chess.

Cancel

Knowledge thats worth delivered in your inbox

Retention playbook for Insurance firms in the backdrop of financial crises

4 minutes read

Belonging to one of the oldest industries in the world, Insurance companies have weathered multiple calamities over the years and have proven themselves to be resilient entities that can truly stand the test of time. Today, however, the industry faces some of its toughest trials yet. Technology has fundamentally changed what it means to be an insurer and the cumulative effects of the pandemic coupled with a weak global economic output have impacted the industry in ways both good and bad.

Chart, line chart

Description automatically generated

Source: Deloitte Services LP Economic Analysis

For instance, the U.S market recorded a sharp dip in GDP in the wake of the pandemic and it was expected that the economy would bounce back bringing with it a resurgent demand for all products (including insurance) across the board. It must be noted that the outlook toward insurance products changed as a result of the pandemic. Life insurance products were no longer an afterthought, although profitability in this segment declined over the years. Property-and-Casualty (P&C) insurance, especially motor insurance, continued to be a strong driver, while health insurance proved to be the fastest-growing segment with robust demand from different geographies

Simultaneously, the insurance industry finds itself on the cusp of an industry-wide shift as technology is starting to play a greater role in core operations. In particular, technologies such as AI, AR, and VR are being deployed extensively to retain customers amidst this technological and economic upheaval.

Double down on digital

For insurance firms, IT budgets were almost exclusively dedicated to maintaining legacy systems, but with the rise of InsurTech, it is imperative that firms start dedicating more of their budgets towards developing advanced capabilities such as predictive analytics, AI-driven offerings, etc. Insurance has long been an industry that makes extensive use of complex statistical and mathematical models to guide pricing and product development strategies. By incorporating the latest technological advances with the rich data they have accumulated over the years, insurance firms are poised to emerge stronger and more competitive than ever.

Using AI to curate a bespoke customer experience

Insurance has always been a low-margin affair and success in the business is primarily a function of selling the right products to the right people and reducing churn as much as possible. This is particularly important as customer retention is normally conceived as an afterthought in most industries, as evidenced in the following chart.

Chart, sunburst chart

Description automatically generated

        Source: econconusltancy.com

AI-powered tools (even with narrow capabilities) can do wonders for the insurance industry at large. When architected in the right manner, they can be used to automate a bulk of the standardized and automated processes that insurance companies have. AI can be used to automate and accelerate claims, assess homeowner policies via drones, and facilitate richer customer experiences through sophisticated chatbots. Such advances have a domino effect of increasing CSAT scores, boosting retention rates, reducing CACs, and ultimately improving profitability by as much as 95%.

Crafting immersive products through AR/VR

Customer retention is largely a function of how good a product is, and how effective it is in solving the customers’ pain points. In the face of increasing commodification, insurance companies that go the extra mile to make the buying process more immersive and engaging can gain a definite edge over competitors.

Globally, companies are flocking to implement AR/VR into their customer engagement strategies as it allows them to better several aspects of the customer journey in one fell swoop. Relationship building, product visualization, and highly personalized products are some of the benefits that AR/VR confers to its wielders.  

By honoring the customer sentiments of today and applying a slick AR/VR-powered veneer over its existing product layer, insurance companies can cater to a younger audience (Gen Z) by educating them about insurance products and tailoring digital delivery experiences. This could pay off in the long run by building a large customer base that could be retained and served for a much longer period.

The way forward

The Insurance industry is undergoing a shift of tectonic proportions as an older generation makes way for a new and younger one that has little to no perceptions about the industry. By investing in next-generation technologies such as AR/VR, firms can build new products to capture this new market and catapult themselves to leadership positions simply by way of keeping up with the times.

We have already seen how AR is a potential game-changer for the insurance industry. It is only a matter of time before it becomes commonplace.

Cancel

Knowledge thats worth delivered in your inbox

Loading More Posts ...