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.
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.
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-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.
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
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
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
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
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
https://github.com/facebook/react/pull/16963
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
https://github.com/facebook/react/pull/16928
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
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
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
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
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
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
https://github.com/facebook/react/releases/tag/v16.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
This avoids confusion with the Legacy mode.
https://github.com/facebook/react/pull/17165
Announcing Ionic React
In this post, Max Lynch (Ionic CEO) announces the general availability of Ionic React, a native React version of Ionic Framework that allows developers to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. Max dives into the details of why Ionic chose to go in this direction and what it could mean for React devs going forward.
In this post, Max Lynch (Ionic CEO) announces the general availability of Ionic React, a native React version of Ionic Framework that allows developers to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. Max dives into the details of why Ionic chose to go in this direction and what it could mean for React devs going forward.
How Instagram uses Redux to Improve Performance
This is the third part in a series of blog posts by Instagram engineer Glenn Conner on steps the Instagram team took to improve the speed and performance of the app. This post specifically discusses how they use Redux to manage state on Instagram
This is the third part in a series of blog posts by Instagram engineer Glenn Conner on steps the Instagram team took to improve the speed and performance of the app. This post specifically discusses how they use Redux to manage state on Instagram
How to Authenticate with Next.js and Auth0: A Guide for Every Deployment Model
In this article, Sandrino Di Mattia (Senior Engineering Manager at Auth0) explains how (and where) to authenticate your user in the different deployment models that exist for Next.js.
In this article, Sandrino Di Mattia (Senior Engineering Manager at Auth0) explains how (and where) to authenticate your user in the different deployment models that exist for Next.js.
Lifting state up is killing your React app
How could it be possible that one of the 12 main concepts listed in React official documentation might lead to poor performance? This (controversial) article considers a situation when it’s indeed the case.
How could it be possible that one of the 12 main concepts listed in React official documentation might lead to poor performance? This (controversial) article considers a situation when it’s indeed the case.