👷‍♀️ Parallelize CircleCI Jobs Using Workflows

The React repository CI tests now using the CircleCI Workflows feature. This improves status reporting in GitHub.

https://github.com/facebook/react/pull/15704

🎇 React Flare Updates

This week also brings more work on React Flare. There are updated interactiveUpdates flushing heuristics, getAbsoluteBoundingClientRect now accounts for fixed elements, getEventCurrentTarget now uses the fiber tree, and more.

https://github.com/facebook/react/issues/15257

🚧 Set Up Cron Job for Fuzz Tester

The fuzz tester is now run on CI periodically with a randomly generated seed.

https://github.com/facebook/react/pull/15718

🐛 Fix Missing Return Pointer Assignment

This change fixes an issue in the fiber code by assign the missing return pointer correctly.

https://github.com/facebook/react/pull/15700

🛤 Path-Based Imports for RN Renderer

React Native is moving to path-based imports from the globally-unique-named Haste system.

https://github.com/facebook/react/pull/15604

🇪🇺 ReactEurope Recap

I’m writing today’s newsletter from ReactEurope in Paris and there are so many amazing talks. You can catch up by looking at my Twitter thread.

https://twitter.com/PhilippSpiess/status/
1131457729250385921

React State with Hooks: useReducer, useState, useContext

If you haven’t used state management excessively in React Function Components, this tutorial may help you to get a better understanding of how React Hooks – such as useState, useReducer, and useContext – can be used in combination for impressive state management in React applications. In this tutorial, you'll almost reach the point where these hooks mimic sophisticated state management libraries like Redux for globally managed state. Let’s dive into the application which you'll implement together step by step.

Creating Your Own React Validation Library: The Basics (Part 1)

This article takes you through how to implement your own form validation library step by step. There’s plenty of interactive examples, and it’s easy to follow along.

🔥 An Update on React Fire
Dan recently posted an update on React Fire to the GitHub issue. It mentions recent experiments like React Flare and how the work on these features impacts the React Fire plan.

https://github.com/facebook/react/issues/13525#issuecomment-499196939

🧪 Using the Wrong Renderer’s act() Should Warn
The act() test helper now properly warns when the helper is important from the wrong renderer.

https://github.com/facebook/react/pull/15756

🧨 React Flare: Basic Scroll Responder
This PR adds a basic Scroll event responder module to the current set of React Flare event responders.

https://github.com/facebook/react/pull/15827

⏱ Change Suspending and Restarting Heuristic
This change adds a new principle for when we restart a render instead of continuing to completion. For more details, I recommend reading the full explanation in the PR and Dan’s notes at the end.

https://github.com/facebook/react/pull/15769

🔄 React Fresh Updates
React Fresh, the new generation of hot reloading, is getting more updates:
• The babel plugin now handles HOCs
• Generate signatures for hooks
• Support classes by force-remounting on edit

🔎 Lint Rule for Unminified Errors
This change brings a new lint rule for the React repository that logs an error when an invariant message is not part of the error code map. In addition to that, errors are no longer extracted automatically in CI.

https://github.com/facebook/react/pull/15757

🕸 Nested Discrete Events Across Systems
This patch fixes an issue when a legacy event is dispatched within a new event callback or vice versa by making sure that the inner event is not flushed.

https://github.com/facebook/react/pull/15796

🎇 React Flare Updates
More work has been done on React Flare:
• Add onContextMenu to Press
• Ignore Keyboard Interactions on Text Input Children
• Add Event Position Properties to Hover Responder
• Improve Runtime Performance of Hit Target Intersection
• Thanks to Mateusz Burzyński (Andarist), Alt+Tab is now properly handled on macOS.

Don’t forget to check out the umbrella issue for more details:
https://github.com/facebook/react/issues/15257

🖱 Support for User-Blocking and Continuous Events
Events like hover are more important than others but do not need to be processed serially.

https://github.com/facebook/react/pull/15811

🔋 Add Batched Mode Variant to Fuzz Tester
The Suspense test fuzzer now tests the new Batched Mode in addition to the Concurrent Mode and the Legacy Sync Mode.

https://github.com/facebook/react/pull/15734

📦 Update Release Script to be Workspace Aware
The automated release noscripts are now aware of the newly used Workspace feature of CircleCI.

https://github.com/facebook/react/pull/15809

Best practices for building a large scale react application

While making a Single Page App with React, it is very easy for your code-base to become unorganized. There are many good libraries in the React ecosystem that can be used to manage certain aspects of the app, this article covers some of them in depth. Other than that, it lists some good practices to follow from the beginning of the project if you have scalability in mind

React: Optimize Components with React.memo, useMemo, and useCallback

In most cases, React performance is not something you need to worry about. The core library does a ton of work under the hood to make sure everything is rendering efficiently. However, occasionally you can run into scenarios where your components are rendering more often than they need to and slowing your site down. This article looks at some solutions.