Though the final release of macOS Sequoia (macOS 15) won't be available until late September or early October 2024, I'll show you how to install the public beta for an advance look. It's actually stable enough for daily use.

The macOS Sequoia public beta is available to anyone who wants to try it, though you have to register with the Apple Beta Software Program to obtain it.

Table of Contents

1. Is macOS Sequoia stable?
2. Time needed to install
3. What's new in macOS Sequoia
4. Features in macOS Sequoia
5. Small changes in macOS Sequoia
6. Requirements for macOS Sequoia
7. Back up your Mac first
8. Sign up to get the public beta
9. Where to install the macOS beta
   – Install on a spare Mac
   – Install on an external drive
   – Install on a separate volume
10. Use the Startup Manager
11. Halt macOS beta updates
12. Return to macOS Sonoma
13. What's next

Is macOS Sequoia Stable?

So far, users are reporting the beta version has only a few minor issues. They say the beta is "surprisingly stable."

There are reports of issues with external monitors, and users say to expect issues with external third-party devices. There may also be issues with screen sharing, video conferencing (Zoom particularly), or streaming in web browsers.

Time Needed to Install

The update from macOS Sonoma to macOS Sequoia can take more than an hour. The time needed varies widely based on factors such as the size of the update, your Internet speed, and the age and performance of your Mac.

What's New in macOS Sequoia

Users are reporting that macOS Sequoia is faster, with better battery life on laptops, but we can't be sure until we see the final release.

Looking closely at macOS Sequoia, it's plain that it isn't a major overhaul of the operating system. The most useful features are Window Tiling and a new Passwords application, as well as iPhone mirroring and seamless drag and drop between devices.

I've compared Sonoma vs Sequoia in a separate article, and also provided some advice to answer the question, Should You Update to macOS Sequoia?

Features in macOS Sequoia

macOS Sequoia Passwords application

Password Manager

MacOS Sequoia adds a new app called Passwords, improving the way users manage their login credentials.

Built on the existing framework of Apple's Keychain, this app consolidates passwords, passkeys, Wi-Fi passwords, and other essential credentials into one secure, centralized location.

Credentials previously could be edited in System Settings but they were buried and hard to find. The new Passwords app will largely eliminate the need to use third-party password managers such as 1Password, LastPass, or Bitwarden.

macOS Sequoia Window Tiling

Window Tiling

For years, Windows users have complained that MacOS lacks a tiling window manager. MacOS Sequoia adds a new feature called Window Tiling, which allows users to drag windows to the edge of the screen for placement side by side, top and bottom, or in a grid. Third-party utilities have more features but the built-in Window Tiling is a welcome addition.

These two features make an upgrade worthwhile. In addition, Apple has announced other capabilities.

iPhone Mirroring

This feature allows the use of iPhone apps within a macOS window. Users can now check iPhone notifications directly on their Mac, making the Mac an extension of the iPhone.

One user noted, “No longer do I have to find my phone when I am at home sitting in front of my Mac just to check on a notification.”

Seamless Drag and Drop Between Devices

This feature aims to improve the reliability of transferring files between iPhone and Mac, addressing issues with AirDrop. "Transferring files from Mac to an iPhone Apps no longer requires 5+ tedious steps," a user mentioned.

Apple Intelligence

MacOS Sequoia will introduce the first use of Apple Intelligence, Apple's AI initiative. Apple Intelligence comprises new system-level capabilities, leveraging Apple custom silicon for both local and cloud-based processing.

This is more of a future prospect as AI gets baked in to more applications, but we may see improvements to Siri in macOS Sequoia. Note that these capabilities won't be present when you install macOS Sequoia on an Intel-based Mac.

Small Changes in macOS Sequoia

• System Settings: Individual menus have been rearranged for quicker access to frequently used menus.
• Safari: The web browser has faster page load times, a new start page, and a brand new unified menu similar to "compact mode" on iOS. It can summarize websites and highlight relevant information.
• Notes: Minor improvements including collapsible sections and a choice of highlight styles. Also, Notes adds support for live audio transcription and math equations.
• Videoconferencing: Preview what you share in video calls for presentations and screen sharing. Also, background replacements are built into the macOS video feed so you won't need to use background replacements in Zoom or other conferencing apps.

Requirements for macOS Sequoia

Check your macOS version and update macOS to Sonoma (macOS 14) before installing the macOS Sequoia beta.

You should keep the current macOS Sonoma available on your Mac, just in case you run into problems with the beta. That means you should install the macOS Sequoia beta on a separate volume, external drive, or a secondary Mac.

Also, macOS Sequoia does run on older Intel-based Macs, but it may be slow. So I recommend installing it only on Macs with M1, M2, or M3, the Apple Silicon chips.

You can install the macOS Sequoia beta on any computer that runs runs macOS Sonoma with the exception of the 2018–2019 MacBook Air models with Intel Amber Lake chips. Apple provides a list of supported models for macOS Sequoia.

Back Up Your Mac

If you've got a new Mac that hasn't been used, you don't need to back up files. Or, if you're like many developers, you won't need to back up your Mac if you have all your important files stored in the cloud.

Otherwise, if there are important files on your computer, make sure you have a backup of your Mac before you install the macOS beta version.

Sign Up to Get the Public Beta

Apple offers a public beta version as well as developer beta versions. The developer beta is released first and intended for software developers to test compatibility of applications, while the public beta is released a few weeks later. The public beta is more stable and has fewer bugs than the developer beta.

The public beta is available now, for free. Sign up for the public beta on the Apple Beta Software Program website. After you sign up with your Apple ID, your System Settings will show that beta updates are available.

Where to Install the macOS Beta

Your best option is to install the macOS beta on a spare Mac, if you have an extra computer. Ideally, you have a relatively new Mac with an Apple Silicon M1, M2, or M3 chip. If you have an older Mac, you may want to avoid the beta version because it could slow down your computer.

Installing on a spare Mac allows you to try the new macOS version without affecting your daily productivity.

Alternatively, you can install the macOS beta on a separate volume on your Mac. This allows you to boot into the beta version when you want to try it out.

You can also install the beta version on an external drive. In either case, you need to hold the power button until you see the Startup Manager menu which lets you select an alternate to the default startup disk.

Here are instructions for installing the macOS Sequoia beta version on a spare Mac, an external drive, or a separate volume.

Install on a spare Mac

Here's how to install the macOS Sequoia beta on a Mac running macOS Sonoma.

1. Open System Settings and navigate to General and Software Update.
2. Click the "circle I" info button in Beta Updates.
3. Set the Beta Updates to macOS Sequoia Public Beta.
4. Click "Done" and your Mac will check for software updates.
5. After a check, the upgrade name appears with an "Upgrade Now" button.
6. Software updates require at least 20% battery power so you may need to connect to power if your battery is low.
7. Enter your password to start the software update. With a fast Internet connection, the download should take about 30 minutes. After the download, the "preparing" process will take about 15 minutes.
8. Your Mac will restart after the installation. You'll see the Apple logo and a progress bar. The installation process will take about 15 minutes with several automatic restarts.
9. After installation completes, you'll see the login screen. Enter your Mac password, then your Apple ID password, and "Continue" or "Set Up Later" through various agreements and settings.
10. The macOS Sequoia desktop will appear with a the Feedback Assistant application open. Use the Feedback Assistant to report any bugs or issues you encounter.
11. Check About This Mac to confirm you're running macOS 15.

If you don't see macOS Sequoia Public Beta option in Beta Updates, sign up for the Apple Beta Software Program. After you sign up with your Apple ID, your System Settings will show that beta updates are available.

Install on an external drive

Not many users own an external drive now that cloud storage is popular. But if you have an external drive, you can install the macOS beta on it.

You'll need to format the drive so you must erase any files already on the drive. It's best if you own a fast SSD drive with a USB-C or Thunderbolt connection for use of the operating system. You can use a USB thumb drive, but you'll need at least 32 GB of space.

How to format the external drive

1. Connect the external drive to your Mac.
2. Search in Spotlight and open Disk Utility.
3. Select the external drive in the left sidebar.
4. Click Erase to reformat the drive.
5. Name the drive macOS Sequoia or whatever you like.
6. Choose Mac OS Extended (Journaled) as the format.
7. Choose GUID Partition Map as the scheme.
8. Click Erase to format the drive.
9. Close Disk Utility after the drive formatting is done.

How to get the macOS Sequoia beta

You'll need to download *.pkg files to install on an external drive. Several sites provide links to installer *.pkg files for macOS betas. Check:

• betaprofiles.dev
• mrmacintosh.com

Download the latest InstallAssistant.pkg. These files are huge (14GB or more) so a download may take more than 30 minutes with a fast Internet connection.

How to install the macOS Sequoia beta

Double click the InstallAssistant.pkg file to start the installation. Click "Change Install Location" to select the external drive. In the step "Destination Select" you can select the external drive as the installation destination.

Install on a separate volume

If you want to install the macOS beta on a separate volume, follow these steps. You might hear this process called a "dual boot" or "separate partition" installation. Apple's APFS file system introduced "volumes" which are like partitions but more flexible.

You'll have two volumes on your Mac, one for macOS Sonoma and one for macOS Sequoia. You can use the Startup Manager to choose which volume to boot from.

How to create a new volume

1. Search in Spotlight and open Disk Utility.
2. Select the internal drive in the left sidebar.
3. Click the + button in the top bar to add a new volume (or "Edit" > "Add APFS Volume" in the menu).
4. Name the volume macOS Sequoia or whatever you like.
5. Choose a format (commonly "APFS").
6. Click Add to create the volume.
7. Click "Done" and close Disk Utility after the volume creation is done.

Get the macOS Sequoia beta

You'll need to download *.pkg files to install on a separate volume. Several sites provide links to installer *.pkg files for macOS betas. Check:

• betaprofiles.dev
• mrmacintosh.com

Download the latest InstallAssistant.pkg. These files are huge (14GB or more) so a download may take more than 30 minutes with a fast Internet connection.

Install the macOS Sequoia beta

Double click the InstallAssistant.pkg file to start the installation. Click "Change Install Location" to select the volume you created. In the step "Destination Select" you can select the new volume as the installation destination.

Use the Startup Manager

Hold down the power button when starting your Mac to enter the Startup Manager. "Loading startup options" will appear. You have a choice of booting from the internal drive, an external drive (if connected), a disk volume, or "Options."

Select the external drive or volume to boot from. You can set a default for the external drive or volume in System Settings > Startup Disk.

Halt macOS Beta Updates

If you don't want to continue using macOS Sequoia beta, you can turn off beta updates.

Go to System Settings > General > Software Update. Click the "circle I" info button in Beta Updates and set the Beta Updates to Off. This will stop the macOS beta updates.

This is a necessary step if you don't want to use the macOS beta. If you don't do this, your Mac will continue to update to the latest beta version.

Return to macOS Sonoma

If you're using an external drive or separate volume to run the macOS beta, you still have macOS Sonoma on your Mac as the primary volume on the internal drive. Reformat the external drive or delete the volume if you no longer want to use the macOS beta.

Restore macOS Sonoma on a Spare Mac

If you are using macOS Sequoia on a spare Mac, you can restore macOS Sonoma by reinstalling it.

You can download and install macOS Sonoma from the Mac App Store. Search in the Mac App Store for "macOS Sonoma" or use this link to view the listing for macOS Sonoma. Click "Get" and the App Store will open System Settings > General > Software Update and begin downloading macOS Sonoma.

Downloads from the App Store are slow, so expect a wait of an hour or more. The App Store installs an application Install macOS Sonoma in the Applications folder.

After the download is complete, the Install macOS Sonoma application will launch automatically. Follow the instructions to install macOS Sonoma.

Alternatively, you can directly download an installer *.pkg file to restore macOS Sonoma. The download is faster than the App Store. Check:

• mrmacintosh.com

Double click the InstallAssistant.pkg file to start the installation.

What's Next

After you've installed macOS Sequoia, I've got recommendations for a Mac setup, including Mac name settings, Dock settings, and Finder settings.

For developing software on the Mac, you'll need to:

• Install Xcode Command Line Tools for missing command line tools
• Install Homebrew as a software package manager
• Install Git for version control

When you update macOS, you may also want to install newer software as well. Here are new and recommended applications for macOS Sequoia:

• Terminal alternatives
• Text Editor options
• ChatGPT desktop application for better ChatGPT usability

Conclusion

After October 2024, you'll need to update macOS from Sonoma to Sequoia to stay up to date with bug fixes, security, and software compatibility, especially if you are a software developer.

Before then, you can try out the macOS Sequoia beta to see what's new and provide feedback to Apple. See an article MacOS Beta for more details.

Though macOS Sequoia doesn't bring spectacular changes, new features like Window Tiling and the Passwords app are useful.

Installing the macOS beta takes an hour or more, but you may find it is stable enough for daily use, giving you access to new features now.

ReactJS is one of the most popular UI libraries in the front-end development world. And one of the reasons I love React is because of the team behind it and the community's enthusiasm for it.

And when the community speaks up about the need for new features and improvements, the team listens.

The future of React is exciting and interesting. If I had to summarise it in one line, I'd say this pretty much sums it up: 'Write Less, Do More.'

In this article, I will share what's new in React 19 so you can start experimenting with some of the features and learn about what's changing.

Just keep in mind that as I write this, React 19 is still work in progress. Make sure you follow the official guide on GitHub and the official team on social media to stay updated with the latest developments.

Here's what we'll cover:

1. New Features in React v19 – Overview
2. React Compiler
3. Server Components
4. Actions
5. Web Components
6. Document Metadata
7. Asset Loading
8. New React Hooks
   – The new use() hook
   – The useFormStatus() hook
   – The useFormState() hook
   – The useOptimistic() hook
9. Can I use React 19 Now?
10. Summary

🧩 Pre-requisites:

1. Working knowledge of ReactJS
2. Working knowledge of HTML, and JavaScript
3. Basic hands-on experience in developing web apps in ReactJS

If you'd like, you can also watch the video version of this article.

🌟 New Features in React v19 – Overview

Here's a quick overview of the new features React 19 will have:

• 🤖 React compiler: React is working on implementing a new compiler. Currently, Instagram is already leveraging this technology, and it will be released in future versions of React.
• 🔥 Server components: React has introduced the concept of server components after years of development. You'll now be able to use this feature with Next.js.
• 💪 Actions: Actions will also revolutionise how we interact with DOM elements.
• 🌇 Document Metadata: Another much-needed improvement is on the horizon, empowering developers to accomplish more with less code.
• 💼 Assets Loading: This will enable assets to load in the background, which will improve both the application's load time and the user experience.
• ⚙️ Web components: This is particularly fascinating: React code will now enable us to incorporate web components. I'm incredibly excited about this development, as it will unlock a myriad of possibilities.
• 🪝 Enhanced hooks: Exciting new hooks are on the horizon, poised to revolutionise our coding experience.

React 19 is set to tackle one of React's longstanding challenges: the issue of excessive re-rendering. Developers have historically spent countless hours addressing this problem, which often leads to performance issues.

The constant hunt for code causing re-rendering and the subsequent optimisation efforts have been a recurring task for engineers. But with React 19, this concern will be alleviated. The framework will handle re-rendering automatically, streamlining the development process.

Previously, developers relied on techniques such as useMemo(), useCallback(), memo, and so on to manage re-rendering. But with React 19, such manual interventions will no longer be necessary.

The framework will intelligently identify and memoize code under the hood, resulting in cleaner and more efficient code.

💻 You can find the code for all the examples on my GitHub here.

1. 🤖 🤖 React Compiler 🤖 🤖

Currently, React doesn't automatically re-render on state change. A way to optimise these re-renders is to manually use useMemo(), useCallback(), and memo APIs. As per React's team, this was a "reasonable manual compromise". Their vision was to let React manage these re-renders.

But the React team realized that manual optimisation is cumbersome, and the feedback from the community encouraged them to solve this issue.

And so the React Team has created the "React compiler". The React compiler will now manage these re-renders. React will decide automatically how and when to change the state and update the UI.

With this, we developers don't need to do this manually anymore. It also means no need to use useMemo(), useCallback(), and memo.

While this will be released in an upcoming version of React, you can learn more about the compiler from these resources:

• 👉 React Compiler video
• 👉 React Compiler podcast episode

As a result, React will decide which components to optimise and when, along with what to re-render.

One thing I love about React is that before introducing new breaking changes to the outer world, the React teams use these new features first on their production products 😍. Currently, React Compiler is powering Instagram in production.

2. 🔥🔥 Server components 🔥🔥

If you haven't heard about server components yet, you're missing out on one of the most exciting developments in React and Next.js.

Up until now, React components have primarily run on the client side. But React is introducing the groundbreaking concept of running components on the server side.

The idea of server components has been circulating for years, with Next.js being the pioneer in implementing them for production. Starting from Next.js 13, all components are server components by default. To make a component run on the client side, you need to use the "use client" directive.

In React 19, server components will be integrated directly into React, bringing a host of advantages:

• SEO: Server-rendered components enhance search engine optimisation by providing more accessible content to web crawlers.
• Performance Boost: Server components contribute to faster initial page loads and improved overall performance, particularly for content-heavy applications.
• Server-Side Execution: Server components enable executing code on the server, making tasks like API calls seamless and efficient.

These advantages underscore the transformative potential of server components in modern web development.

All the components in React by default are client side. Only when you use 'use server' will the component be a server component.

The below code is in React but will run on the server. You just need to add 'use server' as the first line of the component. This will make the component a "server component". It won't run on the client side and will only run on the server side.

So how can you use a server component?

We can import requestUsername in any React component in the same project. After importing the server component in any React component, we can use "Actions" (we will learn about this soon) to do a specific task.

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  if (canRequest(username)) {
    // ...
    return 'successful';
  }
  return 'failed';
}

In the Actions section, you'll learn more about how to use server components.

Currently Next.js has sever-side component support. You can read more about server components in Next here. With React19, server component support will be available directly in React.

3. 💪💪 Actions 💪💪

In version 19, another exciting addition will be Actions. This is going to be a game-changer for how we work with forms.

Actions will let you integrate actions with the HTML tag

Before Actions:

In the code snippet below, we'll utilize the onSubmit React event, which triggers the execution of the search method upon form submission. But it's important to note that currently, the search method runs solely on the client-side. We're limited to using React events for form submission, meaning the search cannot be executed on the server side.

<form onSubmit={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

After Actions:

With the introduction of server components, Actions can be executed on the server side. In our JSX, with

You can execute both synchronous and asynchronous operations with actions, streamlining data submission management and state updates. The goal is to make the working with forms and handling data easier.

Let's look at an example to see how this works:

"use server"

const submitData = async (userData) => {
    const newUser = {
        username: userData.get('username'),
        email: userData.get('email')
    }
    console.log(newUser)
}

const Form = () => {
    return <form action={submitData}>
        <div>
            <label>Name</label>
            <input type="text" name='username'/>
        </div>
        <div>
            <label>Name</label>
            <input type="text" name="email" />
        </div>
        <button type='submit'>Submit</button>
    </form>
}

export default Form;

In the above code, submitData is the action in the server component. form is a client side component which is using the submitData as action. submitData will be execute on the server. The communication of the client (form), and server (submitData) components is only possible because of the action attribute.

We can use the form and action to handle data submission on the client side as well as on the server side. You can check out this code on GitHub and read more about it here.

In the Enhanced Hooks section, you will learn three new hooks that will also enhance how you can work with forms.

4. ⚙️⚙️ Web components ⚙️⚙️

Around 5 years ago, I delved into the world of web components. Ever since, I've been captivated by their potential. If you're not familiar with web components, let me break them down for you:

Web components allow you to create custom components using native HTML, CSS, and JavaScript, seamlessly incorporating them into your web applications as if they were standard HTML tags. Pretty amazing, right?

Currently, integrating web components into React isn't straightforward. Typically, you either need to convert the web component to a React component or install extra packages and write additional code to make web components work with React. This can be frustrating.

Luckily, React 19 will help you integrate web components into your React code much more easily. If you come across a really useful web component, such as a carousel, you can seamlessly incorporate it into your React projects without the need to convert it into React code.

This streamlines development and allows you to leverage the vast ecosystem of existing web components in your React applications.

But as of now, there are no further details on how the code will look. Still, I am hopeful that it will involve simply importing a web component into a React codebase, similar to module federation. I'm eagerly awaiting further details on this implementation from the React team.

5. 🌇🌇 Document Metadata 🌇🌇

Elements like "title," "meta tags," and "description" are crucial in optimising SEO and ensuring accessibility. In React, where single-page applications are prevalent, managing these elements across different routes can be a bit of a hassle.

Currently, developers often resort to writing custom code, or using packages like react-helmet to handle route changes and update metadata accordingly. This process can be repetitive and error-prone, especially when dealing with SEO-sensitive elements like meta tags.

Before:

import React, { useEffect } from 'react';

const HeadDocument = ({ title }) => {
  useEffect(() => {
    document.title = title;

     const metaDescriptionTag = document.querySelector('meta[name="description"]');
    if (metaDescriptionTag) {
    metaDescriptionTag.setAttribute('content', 'New description');
    }
  }, [title]);

  return null;
};

export default HeadDocument;

In the above code, we have a component HeadDocument which is responsible for updating the title and meta tags based on the props. We are updating these in the useEffect hook. We're also using JavaScript to update the title and meta tags. This component will be updated on route change. This is not a clean way to do this.

After:

With React19, we can use the title and meta tags directly in our React components:

Const HomePage = () => {
  return (
    <>
      <title>Freecodecamp</title>
      <meta name="description" content="Freecode camp blogs" />
      // Page content
    </>
  );
}

This was not possible before in React. The only way was to use a package like react-helmet.

👉 You can read more in these resources about link, meta, script, style, and title.

6. 💼💼 Asset Loading 💼💼

In React, you'll need to carefully manage the loading experience and performance of your applications, particularly with images and other asset files.

Often, the view renders first in the browser, followed by stylesheets, fonts, and images. This can result in a flicker from non-styled (or flash of unstyled content) to a styled view.

To mitigate this issue, developers often resort to adding custom code to detect when these assets are ready, ensuring that the view is displayed only after everything has loaded.

In React 19, images and other files will load in the background as users explore the current page. This improvement should help improve page load times and reduce waiting periods.

Also, React is introducing lifecycle Suspense for assets loading, including scripts, stylesheets, and fonts. This feature enables React to determine when the content is ready to be displayed, eliminating any "unstyled" flickering.

There are new Resource Loading APIs like preload and preinit to provide greater control for when a resource should load and initialise.

By allowing assets to load asynchronously in the background, React 19 minimizes waiting times and ensures that users can interact with the content without interruptions. This optimization not only enhances the performance of React applications but also contributes to a more enjoyable browsing experience for users.

7. 🪝🪝 New React Hooks 🪝🪝

React Hooks have been one of the most loved features introduced in the library. You have likely used React's built-in hooks many times, and perhaps you've tried making your own custom hooks, too. Hooks are so popular that they've become a React programming pattern.

In React 19, the way we use useMemo, forwardRef, useEffect, and useContext will change. This is mainly because a new hook, use, will be introduced.

🥁 useMemo():

You won't need to use the useMemo() hook after React19, as React Compiler will memoize by itself.

Before:

import React, { useState, useMemo } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  // Memoize the result of checking if the input value is empty
  const isInputEmpty = useMemo(() => {
    console.log('Checking if input is empty...');
    return inputValue.trim() === '';
  }, [inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type something..."
      />
      <p>{isInputEmpty ? 'Input is empty' : 'Input is not empty'}</p>
    </div>
  );
}

export default ExampleComponent;

After:

In the below example, you can see that after React19, we don't need to memo the values – React19 will do it by itself under the hood. The code is much cleaner:

import React, { useState, useMemo } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  const isInputEmpty = () => {
    console.log('Checking if input is empty...');
    return inputValue.trim() === '';
  });

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type something..."
      />
      <p>{isInputEmpty ? 'Input is empty' : 'Input is not empty'}</p>
    </div>
  );
}

export default ExampleComponent;

🥁 forwardRef()

ref will be now passed as props rather than using the forwardRef() hook. This will simplify the code. So after React19, you won't need to use forwardRef().

Before:

Here's an example of how you'd use forwardRef() before React 19:

import React, { forwardRef } from 'react';

const ExampleButton = forwardRef((props, ref) => (
  <button ref={ref}>
    {props.children}
  </button>
));

After:

ref can be passed as a prop. No more forwardRef() is required.

import React from 'react';

const ExampleButton = ({ ref, children }) => (
  <button ref={ref}>
    {children}
  </button>
);

🥁 The new use() hook

React19 will introduce a new hook called use(). This hook will simplify how we use promises, async code, and context.

Here is the syntax of hook:

const value = use(resource);

The below code is an example of how you can use the use hook to make a fetch request:

import { use } from "react";

const fetchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
  };

  const UsersItems = () => {
    const users = use(fetchUsers());

    return (
      <ul>
        {users.map((user) => (
          <div key={user.id} className='bg-blue-50 shadow-md p-4 my-6 rounded-lg'>
            <h2 className='text-xl font-bold'>{user.name}</h2>
            <p>{user.email}</p>
          </div>
        ))}
      </ul>
    );
  }; 
export default UsersItems;

Let's understand the code:

1. fetchUsers is responsible for the GET request.
2. We are using the use hook to execute the fetchUsers instead of using the useEffect or useState hooks.
3. The return of the useState hook is users which will have the response of the GET request (users).
4. In the return block, we are using users to map over it and create the list.

💻 You can check out this code on GitHub.

Another place we can use the new hook is with Context. The Context API is a popular way to manage global states in React without using any state management libraries. With the use hook, the context hook will look like the below code.

Now, instead of useContext(), we will have use(context).

import { createContext, useState, use } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const Card = () => {
  // use Hook()
  const { theme, toggleTheme } = use(ThemeContext);

  return (
    <div
      className={`p-4 rounded-md ${
        theme === 'light' ? 'bg-white' : 'bg-gray-800'
      }`}
    >
      <h1
        className={`my-4 text-xl ${
          theme === 'light' ? 'text-gray-800' : 'text-white'
        }`}
      >
        Theme Card
      </h1>
      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
       Hello!! use() hook
      </p>
      <button
        onClick={toggleTheme}
        className='bg-blue-500 hover:bg-blue-600 text-white rounded-md mt-4 p-4'
      >
        {theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
      </button>
    </div>
  );
};

const Theme = () => {
  return (
    <ThemeProvider>
      <Card />
    </ThemeProvider>
  );
};

export default Theme

Let's understand the code:

1. ThemeProvider is responsible for the context providing.
2. card is the component where we will consume the context. For this we will be using new hook use to consume the context. The rest is the same as before React19.

💻 You can check out the above code examples on GitHub.

In React19, we have new hooks to handle form status and data as well. This will make working with forms smoother and easier. Combining these hooks with actions (new React19 feature) will make working with forms and handling data easier.

🥁 The useFormStatus() hook

This new hook in React19 will help you have more control over the forms you create. It will give you status information about the last form submission.

Here's the syntax:

const { pending, data, method, action } = useFormStatus();

or the simple version:

const { status } = useFormStatus()

Let's see what's going on here:

1. pending: if the form is in a pending state, then it will be true, otherwise it will be false.
2. data: an object implementing the FormData interface that contains the data the parent <form> is submitting.
3. method: the HTTP method – GET, or POST. By default it will be GET.
4. action: a function reference.

This hook will be used to display a pending state and what data is being submitted by the user.

Here's a code example:

import { useFormStatus } from "react-dom";

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>{status.pending ? 'Submitting...' : 'Submit'}</button>;
}

const formAction = async () => {
  // Simulate a delay of 2 seconds
  await new Promise((resolve) => setTimeout(resolve, 3000));
}

const FormStatus = () => {
  return (
    <form action={formAction}>
      <Submit />
    </form>
  );
};

export default FormStatus;

Let's understand what's happening in the above code:

1. Submit is a method – a form's action to submit the form. This method will check the status from useFormStatus which will let us know if the status.pending is true or false.
2. Based on status.pending we can display the message in the UI.
3. formAction is a faker method to delay the form submission.

In the above code, on the form submission, from the useFormStatus hook we will get a pending status. While pending is true, the text "Submitting..." will display on the UI. Once pending is false, the Submitting text will be changed to "Submitted".

This hook is powerful and will be helpful when you want to know the status of a form submission (pending or not) and accordingly display the data.

💻 You can check out this code here.

🥁 The useFormState() hook

Another new hook in React19 is useFormState. It allows you to update state based on the result of a form submission.

Here's the syntax:

const [state, formAction] = useFormState(fn, initialState, permalink?);

1. fn: the function to be called when the form is submitted or button is pressed.
2. initialState: the value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
3. permalink: this is optional. A URL or page link, if fn is going to be run on server then the page will redirect to permalink.

This hook will return:

1. state: the initial state will be the value we have passed to initialState.
2. formAction: an action that will be passed to the form action. The return value of this will be available in the state.

Here's an example of how it works:

import { useFormState} from 'react-dom';

const FormState = () => {
    const submitForm = (prevState, queryData) => {
        const name =  queryData.get("username");
        console.log(prevState); // previous form state
        if(name === 'john'){
            return {
                success: true,
                text: "Welcome"
            }
        }
        else{
            return {
                success: false,
                text: "Error"
            }
        }
    }
    const [ message, formAction ] = useFormState(submitForm, null)
    return <form action={formAction}>
        <label>Name</label>
        <input type="text" name="username" />
        <button>Submit</button>
        {message && <h1>{message.text}</h1>}
    </form>
}

export default FormState;

Let's understand what is happening in the above code:

1. submitForm is the method responsible for the form submission. This is the Action (remember Action new React19 feature).
2. Inside submitForm, we are checking the value of the form. Then, depending on whether it's successful or shows an error, we return the specific value and message. In the above code example, if there is any value other than "John", then it will return an error.
3. We can also check the prevState of the form. The initial state would be null, and after that it will return the prevState of the form.

On running this example, you will see a "welcome" message if the name is John – otherwise it will return "error".

💻 You can check out this code here.

🥁 The useOptimistic() hook

useOptimistic is a React Hook that lets you show a different state while an async action is underway, according to the React docs.

This hook will help enhance the user experience and should result in faster responses. This will be useful for applications that need to interact with the server.

Here's the syntax of the useOptimistic hook:

const [ optimisticMessage, addOptimisticMessage] = useOptimistic(state, updatefn)

For example, while a response is on the way, we can show a "state" to give the user an immediate response. Once the actual response is returned from the server, the "optimistic" state will be replaced by it.

The useOptimistic hook will immediately update the UI assuming the request will succeed. The name is "optimistic" because the user will see the optimistic (success) result of performing an action, even though the action actually takes time to complete.

Let's look at how we can implement the useOptimistic hook. The below code shows the optimistic state on click of the button submit <form input> (Sending...) until the response doesn't come.

import { useOptimistic, useState } from "react";

const Optimistic = () => {
  const [messages, setMessages] = useState([
    { text: "Hey, I am initial!", sending: false, key: 1 },
  ]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );

  async function sendFormData(formData) {
    const sentMessage = await fakeDelayAction(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }

  async function fakeDelayAction(message) {
    await new Promise((res) => setTimeout(res, 1000));
    return message;
  }

  const submitData = async (userData) => {
    addOptimisticMessage(userData.get("username"));

    await sendFormData(userData);
  };

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={submitData}>
        <h1>OptimisticState Hook</h1>
        <div>
          <label>Username</label>
          <input type="text" name="username" />
        </div>
        <button type="submit">Submit</button>
      </form>
    </>
  );
};

export default Optimistic;

1. fakeDelayAction is a fake method to delay the submit event. This is to show the optimistic state.
2. submitData is the action. This method is responsible for the form submission. This could be async, too.
3. sendFormData is responsible for sending the form to fakeDelayAction
4. Setting the default state. messages will be used in the useOptimistic() as input and will return in optimisticMessages.

const [messages, setMessages] = useState([{ text: "Hey, I am initial!", sending: false, key: 1 },]);

Now, let's get into more details:

Inside submitData, we are using addOptimisticMessage. This will add the form data so that it will be available in optimisticMessage. We will use this to show a message in the UI:

{optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}

💻 You can check out this code here.

Here is a summary of the 3 form hooks we learned about:

Summary of new hooks

❓Can I Use React 19 Now?

As of now, all the features mentioned above are available in the canary release. You can learn more here. As suggested by the React team, do not use these for customer/user facing apps at the moment. Feel free to play around for your own learning, or for fun only.

If you're wondering when React19 is scheduled to release, you can follow the Canary Releases for updates.

To know more, you can follow the React team in the following places to stay updated:

• Official Website
• Team
• GitHub
• Canary Releases

🌟 Summary

We've covered a lot in this article. Here's a quick summary of the exciting changes coming to React v19:

1. 🤖 There will be a new React compiler that will be introduced in a future version of React.
2. 🙌🏽 We'll now have auto re-rendering, memoization, and optimisation of state and UI.
3. 🔮 There will be some new hooks like use() that will help simplify promises and async code.
4. ⚙️ There will now be server side component support in React.
5. 📝 We'll have better form handling using actions, useFormStatus(), useStatusForm(), and useOptimistic().
6. 🖼 React will optimise asset loading to enhance performance by using suspense under the hood.
7. 🔗 We'll have web component integration in React.

If you liked this article, found something you'd like to discuss, or just want to stay connected, come and say hi on Linkedln, Twitter, and YouTube.

Discord has to update often because the Discord team implements new features and bug fixes regularly.

In addition, the app itself must load new messages from chat rooms and DMs. Once the update fails, Discord gets stuck in an update failed loop.

In this guide, I will show you 4 ways you can fix the Discord update failed error on a Windows 10 computer.

What We'll Cover

• Double-check your Internet Connection
• Run Discord as an Administrator
• Rename Discord’s Update.exe File
• Temporarily Disable your Antivirus Program and VPN
• Uninstall and Reinstall Discord
• Conclusion

Solution 1: Double-check your Internet Connection

The first thing I would suggest you do is to check your internet connection.

That’s because Discord needs an internet connection to update, as the update has to be done over the internet. Once there’s no internet connection, the update won’t happen.

Make sure your Windows 10 PC is connected to the internet and the internet connection is strong enough.

Solution 2: Run Discord as an Administrator

A common solution to this issue is to run the Discord app as an admin.

This could fix the issue because any app you want to install needs admin privileges. Discord is not an exception, so granting it admin privileges can make it dig deeper into the issue and resolve it.

To run Discord as administrator, search for Discord and select Run as Administrator on the right:

Solution 3: Rename Discord’s Update.exe File

There’s a separate executable for updating Discord. This is the update.exe file in the Discord folder.

Renaming this file can force Discord to download a fresh one and subsequently fix the issue for you.

Follow these steps to rename Discord’s update.exe file Press WIN (Windows logo key) + R on your keyboard and type in %localappdata%.

Look for the Discord folder and open it.

Right-click on the Update.exe file and select rename. Then rename it to something like “Updater.exe”. You must not change the extension.

Open the app again and see if the problem gets fixed.

Solution 4: Temporarily Disable your Antivirus Program and VPN

Antivirus programs and VPNs are known for interfering with the normal functioning of computers and internet connections. So if you have one or both of them on your PC, it might be stopping Discord from updating.

To disable your antivirus and VPN, open Task Manager, right-click on WIN (Windows logo key) and select Task Manager.

Under processes, right-click on Discord and select “End Task”.

Solution 5: Uninstall and Reinstall Discord

If the solutions already discussed fail to work for you, the last resort is to uninstall Discord and reinstall it.

Step 1: Head over to Control Panel and select Uninstall a Program.

Step 2: Look for Discord, right-click on it and select uninstall.

Step 3: To completely remove Discord, press WIN + R on your keyboard, type %localappdata%, and click OK.

Step 4: Right-click on the Discord folder and select Delete.

Step 4: Download Discord again and install it.

Conclusion

I hope the solutions discussed above help you get Discord to update so you can start using it again.

Thank you for reading.

React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of.

In this tutorial, I will give a quick guide of the features released in React 18, and explain a few major concepts such as concurrent rendering, automatic batching and transitions.

React 18 Feature Quick Guide

Now let's look at each of these updates in more detail. But first, if you haven't already, let's learn how to update React.

How to upgrade to React 18

Install React 18 and React DOM from npm or yarn, like this:

npm install react react-dom

Then, you'll want to use createRoot instead of render.

In your index.js, update ReactDOM.render to ReactDOM.createRoot to create a root, and render your app using root.

Here's what it would look like in React 17:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);

And here's what it looks like in React 18:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App />);

Concurrency in React 18

To understand concurrency, let’s consider this example by Dan Abramov from React 18 Working group discussions.

Let’s say that we need to call two people – Alice and Bob. In a non-concurrent setting, we can only have one call at a time. We would first call Alice, end the call, and then call Bob.

This is fine when calls are short, but if call with Alice has a long waiting period (such as on-hold), this can be a time sink.

Image showing that in a typical non-concurrent phone conversation, you have to wait for a call to be over before starting a new call.

In a concurrent setting, we could call Alice and, once we were put on hold, we could then call Bob.

This doesn’t mean that we are talking to two people at the same time. It just means that we can have two or more concurrent calls at the same time and decide which call is more important.

Image showing phone conversation between Alice and Bob can be concurrent, by placing a call on hold and answering a more urgent call with Bob first.

Similarly, in React 18 with concurrent rendering, React can interrupt, pause, resume, or abandon a render. This allows React to respond to the user interaction quickly even if it is in the middle of a heavy rendering task.

Before React 18, rendering was a single, uninterrupted, synchronous transaction and once rendering started, it couldn’t be interrupted.

Concurrency is a foundational update to React’s rendering mechanism. Concurrency allows React to interrupt rendering.

React 18 introduces the foundation of concurrent rendering and new features such as suspense, streaming server rendering, and transitions are powered by concurrent rendering.

New React 18 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, come back and continue cooking, only to find out you need another ingredient, go to the grocery store...and drive yourself crazy.

In React, batching helps to reduce the number of re-renders that happen when a state changes, when you call setState. Previously, React batched state updates in event handlers, for example:

const handleClick = () => {
setCounter();
setActive();
setValue();
}

//re-rendered once at the end.

However, state updates that happened outside of event handlers were not batched. For example, if you had a promise or were making a network call, the state updates would not be batched. Like this:

fetch('/network').then( () => {
setCounter(); //re-rendered 1 times
setActive();  //re-rendered 2 times
setValue();   //re-rendered 3 times
});

//Total 3 re-renders

As you can tell, this is not performant. React 18 introduces automatic batching which allows all state updates – even within promises, setTimeouts, and event callbacks – to be batched. This significantly reduces the work that React has to do in the background. React will wait for a micro-task to finish before re-rendering.

Automatic batching is available out of the box in React, but if you want to opt-out you can use flushSync.

Transitions

Transitions can be used to mark UI updates that do not need urgent resources for updating.

For example, when typing in a typeahead field, there are two things happening: a blinking cursor that shows visual feedback of your content being typed, and a search functionality in the background that searches for the data that is typed.

Showing a visual feedback to the user is important and therefore urgent. Searching is not so urgent, and so can be marked as non-urgent.

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.

You can mark updates as non-urgent by using startTransition. Here is an example of what a typeahead component would like when marked with transitions:

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any non-urgent state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

How are transitions different from debouncing or setTimeout?

1. startTransition executes immediately, unlike setTimeout.
2. setTimeout has a guaranteed delay, whereas startTransition's delay depends on the speed of the device, and other urgent renders.
3. startTransition updates can be interrupted unlike setTimeout and won't freeze the page.
4. React can track the pending state for you when marked with startTransition.

Suspense on the server

React 18 introduces:

1. Code splitting on the server with suspense
2. Streaming rendering on the server

Client rendering vs server rendering

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, your 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.

In a client rendering flow, a user has to wait a long time before the page becomes interactive. Source: React Conf 2021 Streaming Server Rendering with Suspense by Shaundai Person

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.

For a detailed overview of client vs server rendering, check out Shaundai Person’s React Conf 2021 talk.

In a server rendering flow, we can display meaningful data to the user much faster by sending HTML from the server. Source: React Conf 2021 Streaming Server Rendering with Suspense by Shaundai Person

Server rendering further enhances the user experience of loading the page and reducing time to interactive.

Now what if most of your app is fast except for one part? Maybe this part loads data slowly, or maybe it needs to download a lot of JS before it gets interactive.

Before React 18, this part was often the bottleneck of the app, and would increase the time it took to render the component.

One slow component can slow down the entire page. This is because server rendering was all or nothing – you couldn’t tell React to defer loading of a slow component and couldn’t tell React to send HTML for other components.

React 18 adds support for Suspense on 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.

In React 18, one slow component doesn’t have to slow the render of your entire app. With Suspense, you can tell React to send HTML for other components first along with the HTML for the placeholder, like a loading spinner. Then when the slow component is ready and has fetched its data, the server renderer will pop in its HTML in the same stream.

Image showing that suspense on the server can allow a slow component to show a loading state while others are fully rendered.

This way the user can see the skeleton of the page as early as possible and see it gradually reveal more content as more pieces of HTML Arrive.

All of this happens before any JS or React loads on the page, which significantly improves the user experience and user-perceived latency.

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 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 effects being mounted and unmounted multiple times.

Conclusion

In a summary, React 18 sets the foundation for future releases and focusses 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.

Give it a go and let me know what you think!

Sources:

1. React RFC
2. My previous React 18 post
3. React V18 blog
4. React Conf 2021 - React for App developers
5. React Conf 2021 - Streaming Server Rendering with Suspense

If you enjoyed this article, give it a ❤️ so others can find it too.

• For more frequent tips, stay in touch on Twitter
• Want articles like this directly in your inbox?

Node is a runtime environment that allows developers to execute JavaScript code outside the browser, on the server-side.

NPM, on the other hand, is a package manager for publishing JavaScript packages (also known as Node modules) to the npm registry. You can also use it to install packages to your applications.

To install Node, you have to go to the Nodejs website to download the installer. After downloading, you can run the installer, follow the steps, agree to the terms and conditions, and have the installer on your device.

When you install Node, you also get the npm CLI which you can use to manage packages in your applications.

However, Node and NPM can be updated separately to their latest versions, and in the rest of this article, I'll show you how.

How to Update Node

1. Use NPM to Update Your Node Version

To update Node with NPM, you will install the n package, which will be used to interactively manage node versions on your device.

Here are the steps:

Clear the NPM cache

When you install dependencies, some modules are cached to improve the speed of installation in subsequent downloads. So first, you want to clear the NPM cache.

Install n

npm install -g n

You'll need to install this package globally as it manages the Node versions at the root.

Install a new version of Node

n lts
n latest

The two commands above install the long-term support and latest versions of Node.

Remove previously installed versions

n prune

This command removes the cached versions of the previously installed versions and only keeps the latest installed version.

2. Use NVM to Update Your Node Version

NVM stands for Node Version Manager, and as the name implies, it helps you manage your Node Versions. With NVM, you can install Node versions and specify the version of Node that a project uses.

NVM makes it easy to test projects across various Node versions.

To update a Node Version with NVM, you have to install NVM first.

Here is the installation guide for NVM.

When installed, you can install packages with:

nvm install [version]

You can install the latest version with:

nvm install node

And uninstall other versions with:

nvm uninstall [version]

With many versions installed, you may also want to specify the version to use at a particular time. One way to do this is by setting a default alias like this:

nvm alias default [version]

This way, Node executions will run with the specified version.

3. Download Updated Node Binaries

And you can also get the latest versions from the Node.js website. On it, you can find the latest and long-term support versions for your device.

Node.js downloads page

Downloading the latest version also gives you the latest version of NPM.

How to Update NPM

Just as you use NPM to update packages, you can use NPM to update itself. Here's the command to achieve this:

npm install -g npm@latest

This command will install the latest version of NPM globally.

On Mac, you may have to pass the sudo command before NPM, as this installs NPM at the root of your device, and you need privileges to do that.

Conclusion

In this article, we've seen how to update Node and NPM to their latest versions.

To reiterate, when you install Node, you automatically get NPM. If you also update Node by installing the binaries from the website, you get an updated NPM.

We also saw other ways to update Node and NPM globally on your device.

Over the last few years, Android OS has come to dominate the mobile OS landscape with over 86% market share as of 2019. The system provides high-performing and secure usage and comes with regular version updates with new features.

Because of this, many Android users want to know how to check their current Android version and update it to the latest one.

So in this article, we will learn how to figure out which version your smartphone is running and how to install an Android OS update. But before that let’s get a quick overview of the history of Android versions.

A Brief History of the Android Operating System

Google first introduced the revolutionary Android operating system as an alternative to Apple’s iOS in late 2008.

Since it’s existed, Android has had 12 versions since its humble beginning with sometimes even more than one release in a year.

The constant support from Google developers made the system the top OS with almost 3 million apps in the Play Store. This helped switch Android app development from Java to Kotlin and ensured that Android developers were highly paid and quite in demand on the market.

Here I've gathered an abridged listing to demonstrate how the operating system has been changing and evolving to provide users with advanced functionality. For much of its lifetime, the OS version was designated by a number and a codename.

• Android 1.0 to 1.1 - Google’s original mobile OS offered basic capability with integrated apps like Gmail, Maps, Calendar, and YouTube.
• Android 1.5 or Cupcake - Released in early 2009, this was the first-named version of the OS. It included an on-screen keyboard and introduced the framework for third-party apps to be run on mobile devices.
• Android 2.0-2.1 or Eclair - Version 2.0 added real-time traffic information, voice-guided navigation, and pinch-to-zoom capability to the OS.
• Android 2.3 or Gingerbread - The 2010 release of this OS focused on the black and green interface as Android began to develop a distinctive look.
• Android 3.0-3.2 or Honeycomb - Released in 2011, this version of the operating system was specifically for tablet devices and introduced on-screen buttons.
• Android 4.0 or Ice Cream Sandwich - This was a unified OS for phones and tablets all released in 2011 which featured a holographic appearance and made extensive use of swiping when using the system.
• Android 4.4 or Kit-Kat - Late 2013 saw this update which lightened the interface’s color scheme and introduced the world to “OK, Google” support.
• Android 5.0-5.1 or Lollipop - Major changes were made with 2014’s upgrade. Google introduced the card-based Material Design standard employed to unify the appearance of items displayed by the OS.
• Android 6.0 or Marshmallow - This relatively minor update in 2015 was the beginning of Google’s patterns of relaying a new, numbered version every year.
• Android 7.0-7.1 or Nougat - 2016’s entry in the Android OS lexicon added native split-screen mode and launched Google Assistant.
• Android 9 or Pie - Google released this last-named version of Android in August of 2018. The most visible updates of this version for users were the large Home and small Back buttons to the user interface and new security features.
• Android 10 - is the last live version of OS and we will cover it in more detail below.

Main Features of Android 10

Android 10 was released on September 3, 2019. It has many new and improved features that are good reason to upgrade your Android OS if you are still using version 9.

Here are some of the highlights of the current Android version.

• Live Caption gives users the ability to automatically caption media playing on your device.
• Smart Reply helps streamline communication by suggesting responses and recommending actions.
• Sound Amplifier lets you fine-tune the audio settings of your phone to allow you to hear more clearly.
• Gesture Navigation introduces more intuitive ways to swipe and pull and provides added flexibility to the Android interface.
• Dark Theme uses true black to save battery power and give your eyes a rest. Some users may prefer it to Android’s normal look.
• Enhanced security settings let you exert more control over the privacy of your data. You can control how data and location information is shared from the same settings area.
• Digital Well-being is a tool that strives to help users find the right balance between work and the rest of their lives. It has features that can help you be more productive or unplug for some much-needed relaxation.
• Focus mode is designed to help users stay focused on specific tasks by minimizing distractions. It lets you temporarily pause apps that may distract you by simply tapping on them.
• Family Link enables digital ground rules to be set and can help parents guide their children’s online activities. Set limits on screen time, restrict content and manage apps for your family.

If you have recently purchased a new Android comparable device, it probably came with Android 10 installed. If that is not the case, these features might persuade you that you need to update the Android OS on your phone or tablet.

Checking Your Current Android OS and updating to Version 10

When you are preparing to upgrade your mobile device, you need to know what is the latest Android OS version that can run on your machine. Some older devices may be restricted as to the version that they can handle.

Depending on the type of device and its age, the method of obtaining an Android OS download may vary. Newer devices will receive updates more quickly and users of Google devices will get notifications when they are available.

Here’s how to update your Android OS. Some preliminary steps should be taken before performing the actual update.

Check Your Android Version

The exact steps needed to perform a version check will be determined by your type of device. You want to get to the About phone information which is found in the device’s Settings. The model number can also be found here and should be noted before you begin your update.

1. Go to the Settings and scroll down to find out the System category.

2. In the System Settings section click on About device

3. Here scroll down to the end of list until you see Android version which means the version your mobile is running now.

If you decide to update your OS manually, here are a few tips to keep in mind before that:

Back up your data - You should be backing up your data regularly. Before an operating system upgrade is always a good time for a backup. You never know what might happen, so don’t take chances with your important data. Many backup apps are available. Get one and use it.

Verify your available space - The upgrade will detail how much space is necessary for your upgrade. Make sure you have enough space or move some things off of the device to free up enough for the update.

Updating the OS - If you have received an over-the-air (OTA) notification, you can simply open it up and tap the update button. You can also go to Check for Updates in Settings to initiate the upgrade.

Note: Some users may prefer to root their device to obtain updates as soon as they are available as well as being able to have more control over the device and what apps run on it.

What to Expect in Android 11

Even though there are considerable technical advances in version 10, Google plans to release the newest Android OS according to plan sometime in 2020. As you may have noticed, the company does not like to stand still.

Android 11 will focus on changes to privacy and security, application behavior, and new features including APIs. The operating system will provide support for 5G and foldable devices, positioning it to capitalize on the move to faster networks. Some specific features are:

• Biometric authentication capabilities to more securely protect your device;
• Restricts repeatable permission requests to make apps more user-friendly;
• Allows temporary permission to be given to the camera, microphone, and location services;
• Apps can automatically run authentication and connect to an available secure WiFi hotspot;
• Expanded camera support;
• Chat bubbles can be turned on and off for individual apps.

These are just a few of the new Android 11 features that the users will expect. App designers will also enjoy the extended functionality they can bring to their creations.

Wrapping Up

Except in very rare cases, you should upgrade your Android device when new versions are released. Google consistently provided many useful improvements to the functionality and performance of new Android OS versions. If your device can handle it, you just might want to check it out.