What's new in Create React App version 4

Posted on November 06, 2020


Create React App (CRA) is an NPM utility package used to create a pre-configured React project. This tool allows you to focus on coding your application without needing to know how to configure tools like Babel and Webpack, which is required to run React app in the browser.

Highlights

On 23rd October 2020, CRA version 4 was released to provide dependency updates for developer tools like ESLint as well as adding several new features. Here are some interesting details for the new CRA version:

react-hot-loader is replaced with Fast Refresh

Fast Refresh is originally a feature of React Native, but it’s very useful for development that the React team also wants it available for web projects, replacing the dependency on react-hot-loader.

One of the advantages of Fast Refresh over React Hot Loader is that it can preserve the local state value in function components (and Hooks) by default. That’s right! Your state won’t revert back to its default value when you change the code and hit save.

Updated tools dependencies

CRA dependencies for several tools are updated: TypeScript to version 4, ESLint to version 7, and Jest to version 26. Some of these changes are breaking, so you need to pay attention.

React version 17

React version 17 means CRA project now supports JSX transform, which enables you to use JSX without importing React. Remember in the past where you need to import React to use JSX?

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

With the new JSX transform, you can write the function without importing React at all:

function App() {
  return <h1>Hello World</h1>;
}

But of course, you still need to import React when you use hooks and other React features.

Web Vitals support

Web Vitals is a library from Google Chrome team that aims to capture the user experience of a web page. With CRA 4, Web Vitals is now supported out of the box, helping you to measure important metrics like:

  • Cumulative Layout Shift (CLS)
  • First Input Delay (FID)
  • Largest Contentful Paint (LCP)

You can see measuring performance documentation for more information.

PWA full customization support

With CRA 4, the project now uses Workbox’s InjectManifest plugin and allows full customization over the logic in the service worker. You can see more details in the PWA documentation.

Breaking changes

The new react-scripts@4.0.0 contains a number of breaking changes that shouldn’t affect the majority of users. Here are some important changes that you need to pay attention to:

ESLint

ESLint has been updated to version 7 that adds many new rules for Jest, React Testing Library, and the import/no-anonymous-default-export rule. The rule eslint-plugin-hooks is udpated to 4.0.0 and EXTEND_ESLINT flag has been removed as it’s no longer required to customize the config.

Jest

Jest is updated to version 26 and it has resetMocks value set to true by default.

Service workers

Service workers have been switched to Workbox InjectManifest plugin and the PWA template now has its own repository

Dropped Node 8 support

Node 8 is no longer supported since the end of 2019 anyway.

For more details, see the breaking changes in the changelog.

Updating your Create React App

You can update any Create React App project that has not been ejected by updating react-scripts version to 4.0.0:

npm install --save --save-exact react-scripts@4.0.0

#or 

yarn add --exact react-scripts@4.0.0

You can also update the dependency in package.json manually then do npm install command. You may need to delete your node_modules folder and run the install command if you encounter any error after upgrading the package.

If you have ejected your project, it’s still possible to update by reverting to the commit where you ejected, update the dependency, and eject again after it has been updated.

More about React:

Level up your React skill today 🔥

Build FOUR projects using React with my latest book.

Structured knowledge from beginner to experienced level!

Learn more