Create React App Turns Four

Create React App v4 is live! This post is a quick overview of what has changed.

Creating & Migrating

A v4 project can be created with: npx create-react-app myapp . You still have time to grab a coffee while it installs - some things never change!

To update an existing project from 3.4.x to 4.0.0, use npm install --save --save-exact react-scripts@4.0.0 . If you run into issues, try deleting the node_modules folder and reinstall the project's dependencies with npm install.

Fast Refresh

Fast Refresh is arguably the headline feature in CRA v4. It was available in v3, hidden behind an experimental feature flag, but has now officially replaced React Hot Loader. Fast Refresh is noticeably quicker, automatically reloads when syntax and run time errors are resolved, and - drum roll please - preserves the state of functional components and hooks on reloads.

If you want to quickly try it out, go ahead and create a small counter component:

function App() {
  const [count, setCount] = useState(0);
  return (
        <>
          <button onClick={() => setCount((count) => count + 1)}>{count}</button>
          {/* <p>The state is preserved!</p> */}
        </>
  );
}

Click the button a few times, uncomment the paragraph element, save and watch as the count value stays the same. Super neat!

React v17

CRA v4 now uses React v17. This release famously has no new developer features. Things are changing under the hood though, in particular to event delegation and making React easier to upgrade.

One big advantage to v17 is when writing React components: the new JSX transform means that we no longer need to import React into components to use JSX 🎉 . Unless you are using TypeScript, in which case you still need to wait a little longer to take advantage of this.

Typescript v4

Speaking of which, support for the latest version of Typescript now comes out of the box. TypeScript v4 has no breaking changes, which should make upgrading a breeze, and brings with it some type changes and inference improvements.

Webvitals Support

One of the more intriguing additions to CRA v4 is the inclusion of Chrome's web-vitals library. This tiny library can provide performance metrics on your app such as first input delay and cumulative layout shift.

One of the first things you may notice is a new file within your project's src directory: reportWebVitals.js. This file is imported in index.js:

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

In addition to simply logging out the metrics, they can also be passed to an analytics endpoint such as Google Analytics.

Jest v26 and ESLint 7

CRA v4 now comes with Jest v26. A current and ongoing goal for the Jest project is to reduce its package size, with Jest v26 being the first step towards that. ESLint has also been upgraded to v7, adding with it several new recommended rules such as no-dupe-else-if , no-import-assign and no-setter-return .

Goodbye Node 8

Node 8 reached end of life at the end of 2019, and with CRA v4 is no longer supported. If you're still using Node 8, it's time to look for an upgrade path!

Thanks as always to all the contributors for this release.