Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
The Plan for React 18

The React team is excited to share a few updates:

  1. We’ve started work on the React 18 release, which will be our next major version.
  2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18.
  3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback.

These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you’re curious!

What’s coming in React 18

When it’s released, React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy.

These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.

If you’ve been following our research into the future of React (we don’t expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means you will be able to adopt React 18 without rewrites and try the new features at your own pace.


Read more
 
How to Deploy a React Router-Based Application to Netlify

In this article, we'll learn the most popular ways of deploying a React app to Netlify. We'll also learn the configuration changes you'll need to make to deploy a Routing-based React app.

The thing I love about Netlify is that it provides a lot of useful features
for free such as:

  • A way to deploy a static website within seconds
  • Continuous deployment, which means when you connect your Github/Gitlab/Bitbucket repository, it automatically triggers deployment when new commits are pushed to the repository
  • Assurance that your website never goes down, even during new deployments
  • Allows you to easily rollback to any previous working version of your site with a single click
  • Lets you quickly preview any of the previously deployed versions of the app
  • Change the domain or subdomain of your site instantly

and much more.

So let's see how to deploy a React app to Netlify.


Read more
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
What’s new in React 18
Understand the top new features coming to React 18, explained simply.

Watch video
 
The Suspense is Killing Me: Part 1

If you are a long-time React user, you might be wondering for the past few years about when Concurrent Mode/Suspense will ship. The plans to release them have been pushed back more than once and the React core team has been self-admittedly silent. Now with the Server Components demoed and React Labs announced there is more interest than ever.

Here’s a refresher for those who forgot what happened when.

This was a lot, even with heavy pruning!

If you are confused by this timeline and many different names that seemingly refer to more or less the same thing, then you’re not alone.


Read more
 
Just Say No to Excessive Re-Rendering in React

In an extensive React application, excessive or unnecessary re-renders are common. This article addresses instances of excessive re-rendering in React applications and provides several ways to avoid them. It is written for readers with a basic understanding of React fundamentals and React Hooks.

Typically, React performs well out of the box using techniques to reduce the Document Object Model (DOM) operations required to update the user interface (UI) . These techniques lead to faster applications with fewer optimization processes, which improves user experience.

A React application can be built to full functionality under one component. However, a major downfall is that a single-component-based React application would re-render upon each state change. To update a stand-alone React application, users must pass the state through intermediate components.

This method slows application performance. Best practice suggests breaking down the components using the single responsibility principle. Using this principle, each component preferably holds one function. Such decomposition of the components into subcomponents dramatically improves application performance, code reusability and state management.


Read more
 
Using Zustand and TypeScript to Make a To-Do List in React

Today, let’s learn how easy Zustand can make it to manage global client-side state in React by making a to-do list with it.

When I first came across Zustand, I couldn’t believe how easy it was to use. The learning curve is incredibly thin. If you are familiar with how immutable state works in React, then you will feel right at home working with Zustand. So, without further ado, let’s make ourselves a to-do list.

Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2021 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp