React 16.10.0 released

React DOM
• Fix edge case where a hook update wasn't being memoized.
• Fix heuristic for determining when to hydrate, so we don't incorrectly hydrate during an update.
• Clear additional fiber fields during unmount to save memory.
• Fix bug with required text fields in Firefox.
• Prefer Object.is instead of inline polyfill, when available.
• Fix bug when mixing Suspense and error handling.

Scheduler (Experimental)
• Improve queue performance by switching its internal data structure to a min binary heap.
• Use postMessage loop with short intervals instead of attempting to align to frame boundaries with requestAnimationFrame.

useSubnoscription
• Avoid tearing issue when a mutation happens and the previous update is still in progress.

Test Driven Development (TDD) with React, React Testing Library, and Jest

Test Driven Development (TDD) is a reversal in traditional thinking and coding processes. Rather than writing code, and then writing tests to verify that code, the process is reversed. This post outlines the pros and cons of utilizing TDD for developing React applications and explains how to try it out yourself.

Keeping global state management sane

Maintaining a big and complex react app is not for amateurs. Whatever you may choose to manage your app state, chances are that it's hard to pick up, like redux, or really convoluted, like making yourself a service layer. With the goal of making it easy for new developers to jump into our projects, at Labcodes decided it was time to give this problem a little more thought. Their answer was rel-events.

Demonstrating Reusable React Components in a Form

This is a good beginners' level guide to working with reusable React components, specifically how to use them to build a login form.

Design Systems for Developers

A guide that teaches professional developers how to transform component libraries into design systems and set up the production infrastructure used by leading frontend teams.

Intro to SVG for React Developers

From simple glyphs to complex visualizations, you can use SVG (Scalable Vector Graphics) to create reusable React components that render precise vector graphics, all without any additional libraries or tools. This tutorial shows how to build a colorful spinning loading indicator, a Spinner React component, using some very simple SVG markup.

UseAnimations – React micro-animations library

React-useanimations is a collection of free animated open source icons for React.js.

React Async v9 and beyond

The latest version of React Async brings support for Suspense. But perhaps the greatest development is that it's now a community project with financial backing. Async Library has some very ambitious goals and is looking for more collaborators.

🎉 Introducing Concurrent Mode (Experimental)

This week, the React team released the first documentation for Concurrent Mode at the React Conf in Las Vegas. Make sure to take some time to read through everything in detail.

https://reactjs.org/docs/concurrent-mode-intro.html

🧪 React Prereleases

All React packages are now also available in a prerelease channel. These special builds will allow you to test upcoming versions of React and help the team iron out bugs in experimental features.

https://reactjs.org/blog/2019/10/22/react-release-channels.html

✨ useDeferredValue and useTransition

Two new hooks were added to help with Concurrent React. Check out the docs: useDeferredValue and useTransition.

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

🎇 React Interaction Updates

More updates on the experimental React event system:
• FocusTable tabScope Handling and tabIndex Control
• Add Tab Handling to FocusList
• Repurpose React Accessibility Modules
• Add FocusTable colSpan Support
• Modify Scope Query Mechanism
• Add onFocusWithin Event to FocusWithin Responder

⚠️ Remove IIFE Wrappers From Dev Invariant Checks

This change updates the error transform that replaces invariant() calls with an if statement to not need an IIFE wrapper anymore.

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

🖱 Fix mouseenter Handlers Firing Twice

This PR fixes an issue with mouseenter events firing twice in certain cases.

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

👉 Selective Hydration

Selective Hydration, a smarter way to hydrate SSR rendered apps, is being actively worked on:
• ReactDOM.unstable_scheduleHydration(node)
• Prioritize the Last Continuous Target
• Increase Priority for Non-synchronous Discrete Events and Retries

🧹 Upgrade to Jest 24

React is now on the latest version of Jest again!

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

🤫 Allow Suspense Mismatch on the Client to Silently Proceed

Silently try to hydrate bad mismatches instead of gracefully regenerate the content on the client.

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

🐛 DevTools: Trace Updates

This diff adds the Trace Updates feature (for DOM only so far) that can be used to highlight updated elements in the browser.

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

👋 Remove createBatch Experiment

The idea of this API was to coordinate an update to a root with its imperative container in a multiple root React app.

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

🚀 React 16.11.0

The main change of this release is that the unstable_ prefixed concurrent APIs are now removed from the stable release since they are now available on the experimental release.

https://github.com/facebook/react/releases/tag/v16.11.0

➡️ Rename createSyncRoot to createBlockingRoot

This avoids confusion with the Legacy mode.

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