May 15

React 18 was released in March 2022. Officially, React 18 is now ready to use! This release focuses on performance improvements and updating the rendering engine. React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of.

In my opinion, the latest feature that revolutionized the React Ecosystem was React Hooks, introduced in React 16.8 back in 2019. Since then, we have seen many versions being released. But without any major changes, what will happen in React 18? In this tutorial, we will have a quick look at the features released in React 18, and explain a few major concepts such as concurrent rendering, automatic batching, and transitions.

New Features

Automatic Batching

React 18 features automatic batching. To understand batching, let’s consider the example of grocery shopping from the same React Working Group discussion.

Let’s say that you are making pasta for dinner. If you were to optimize your grocery trip, you would create a list of all the ingredients that you need to buy, make a trip to the grocery store, and get all your ingredients in one trip. This is batching.

Without batching, you would start cooking, find out you need an ingredient, go to the grocery store and buy the ingredient. When you come back and continue cooking, you’ll find out you need another ingredient, you’ll then go to the grocery store again to buy that ingredient

In React, batching helps to reduce the number of re-renders that happen when a state changes, when you call setState. With this new exciting feature, React will combine multiple setState() calls into a single re-render to improve performance. Before this, if we had multiple setState() inside of a setTimeout(), React will re-render for every state update which sometimes causes performance issues if we have larger components. Previously, React batched state updates in event handlers.

You may already be familiar with this. This feature was available in React 17, but now it comes out of the box.

// React 17
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // The component will be rendered twice.
  }, 1000);
// React 18
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // The component will be rendered only once.
  }, 1000);

Transitions

This new feature lets the dev split the state update into two categories: urgent and low priority.

Transitions can be used to mark UI updates that do not need urgent resources for updating. For some actions, like selecting in a dropdown or updating an input, you want the action to respond immediately, so now we could distinguish between an urgent update and a non-urgent one. These non-urgent updates are called transitions. By marking non-urgent UI updates as “transitions”, React will know which updates to prioritize. This makes it easier to optimize rendering and get rid of stale rendering.

Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or keypresses come in.

import { startTransition } from 'react';

// Updating state with urgent priority
setInputValue(input);

// Inside startTransition the updates won't be urgent
// and can be interrupted
startTransition(() => {
  setSearchQuery(input);
});

New Suspense Features

Finally, we will have Suspense on the server. In the server-rendered apps, we will have only one Suspense API.

In a client-rendered app, you load the HTML of your page from the server along with all the JavaScript that is needed to run the page and make it interactive.

If, however, the JavaScript bundle is huge, or you have a slow connection, this process can take a long time and the user will be waiting for the page to become interactive, or to see meaningful content. For optimizing the user experience and avoiding the user having to sit on a blank screen, we can use server rendering.

Server rendering is a technique where you render the HTML output of your React components on the server and send HTML from the server. This lets the user view some UI while JS bundles are loading and before the app becomes interactive. Server rendering further enhances the user experience of loading the page and reducing the time to interact.

Before React 18, this part was often the bottleneck of the app and would increase the time it took to render the component. Now React 18 adds support for Suspense on the server. With the help of suspense, you can wrap a slow part of your app within the Suspense component, telling React to delay the loading of the slow component. This can also be used to specify a loading state that can be shown while it’s loading.

Strict mode

Strict mode in React 18 will simulate mounting, unmounting, and re-mounting the component with a previous state. This sets the ground for a reusable state in the future where React can immediately mount a previous screen by remounting trees using the same component state before unmounting.

Strict mode will ensure components are resilient to the effects of being mounted and unmounted multiple times.

IE11 no longer supported

IE11 is no longer supported since React 18. If your app needs to continue bringing support to IE11, you will need to stay at React 17. x.

Conclusion

Some cool features like Automatic Batching or Adding Suspense should improve the performance of React in the latest release. I’m really excited to see how these new features will perform in a real-life app, but they look more than promising. In a summary, React 18 sets the foundation for future releases and focuses on improving the user experience.

Upgrading to React 18 should be straightforward and your existing code should not break after the update. The upgrade process should not take more than an afternoon.

Tags:

May 01

Google Play is officially launching its own version of privacy-related “nutrition labels” for apps. They are introducing a new section in Play Store listings that requires developers to describe the data their app gathers and how they will use it. This will be like a privacy label giving users crucial information at a glance, which should be enough to help them decide if they would like to proceed with the installation.

According to Google, users want to understand the purpose of the apps to collect their data and whether the developer is sharing it with third parties, as well as how developers protect that data. The new section is titled ‘Data safety’ and will appear alongside the usual sections like ‘About this app’ and ‘Ratings and reviews’. It will function as a privacy label, providing users with key information shortly, which should be enough to let them decide whether or not to install the app. Not only will developers declare what data they collect, but also what data they share with third parties, essentially disclosing the purpose behind the collection. Google showed off its version last year but is only beginning to roll it out this week. According to them, it will begin to roll out the new Google Play Data safety section to users on a gradual basis so that Android users won’t see this new section immediately but over the next couple of weeks.

Suzanne Frey, Vice President of Product, Android Security, and Privacy at Google said in a blog post, “You alone are responsible for making complete and accurate declarations in your app’s store listing on Google Play,”

Failure to do so would lead to policy violations, leading to the suspension of the app in the Google Play Store.

“Google Play reviews apps across all policy requirements; however, we cannot make determinations on behalf of the developers of how they handle user data. Only you possess all the information required to complete the Data safety form”. “When Google becomes aware of a discrepancy between your app behavior and your declaration, we may take appropriate action, including enforcement action,” explained Frey.

If the user wants to learn more about a particular entry, tapping on the corresponding item will collapse the menu to reveal more information on what is collected or shared. The third pillar of the Data Safety section will be the app’s security practices, which describe the security mechanisms employed to protect the collected data, like the MASVS standard. This third section also clarifies whether users are given the option to ask for the deletion of their data at any time. And finally, Data Safety will specify if the app follows Google Play Families Policy, which is geared toward children’s protection.

Developers can begin declaring how collected data is used starting today, with the deadline to complete their submissions being July 20th, 2022.

Google told that developers would provide this information themselves, which Google will not confirm. However, if it is discovered that a developer has misrepresented their data use disclosures, they will be required to fix the provided information. Google is essentially relying on developers, to be honest in the information they provide to users in this section.

While Google’s move is beneficial to Android users, a similar feature called ‘Privacy Nutrition Labels’ was already introduced by Apple in 2020. Apple also released a similar feature as part of numerous privacy-enhancing features in last year’s iOS 14. This is another case where competition in the mobile OS space has brought positive developments, giving users more insight and control over how their data are handled by the various software that runs on their smartphones.

While both sets of labels focus on informing users about how apps collect and manage data and user privacy, there are some key differences. Apple’s labels largely focus on what data is being collected, including data used for tracking purposes, and on informing the user what’s linked to them. Google’s labels, meanwhile, put a bigger focus on whether you can trust the data that’s collected is being handled responsibly by allowing developers to disclose if they follow best practices around data security. The labels also give Android developers a way to make their case as to why they collect the data directly on the label, so users can understand how the data is used — for app functionality, personalization, etc. — to help inform the user’s decision to download the app. They can also see if the data collection is required or optional.

Up until now, Android apps on the Play Store had to list a link to their Privacy Policy under the “Additional Information” section and provide a contact email. Since this privacy policy is hosted on an external location, it’s subject to modifications, might be vague, may not disclose all the crucial details about data collection and protection, and may even lead to a broken link.

This Data Safety gives users a clear understanding of what happens with their data without requiring them to spend time digging into sections, while it also empowers Google with enforcement. Moreover, since reading large texts of legal jargon isn’t exactly what users look forward to when browsing the Google Play Store for new apps, almost nobody checks these.

App privacy labels have already been accused of being an unreliable source of information following their launch on the App Store. According to a report by The Washington Post last year, many of the labels they reviewed in a spot-check provided false information. For instance, apps claiming they collected no data were actually found to be doing the opposite — collecting it and sharing it. Google is confident about the step it is taking and also claims to be honest about this Data Safety feature they are bringing.

With a large number of scam apps, malware, and usury apps found on Google Play, this new Data Safety section will not only be useful for Android users but also allow Google to find policy violators more quickly. For more information on the new system, what it includes, and how it works, check out Google’s support page.

Tags: , ,