React v16.9.0 and the Roadmap Update
"Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release."
"Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release."
Apollo Client, now with React Hooks
Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. Apollo Client now includes three hooks that you can drop into your app, anywhere you currently use a corresponding higher-order component or render prop component:
Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. Apollo Client now includes three hooks that you can drop into your app, anywhere you currently use a corresponding higher-order component or render prop component:
useQuery, useMutation, and useSubnoscription.Investigating Discord’s React Memory Leak
In November of 2018, Discord tried to upgrade React from 16.5 to 16.7. After they shipped the upgrade, they started getting reports of users experiencing Discord using a lot of memory — something somewhere was leaking. This is that story and how they fixed it.
In November of 2018, Discord tried to upgrade React from 16.5 to 16.7. After they shipped the upgrade, they started getting reports of users experiencing Discord using a lot of memory — something somewhere was leaking. This is that story and how they fixed it.
The React Hooks Guide - Tutorials and Examples
A thorough step-by-step guide for learning the basic and advanced Hooks (state, effects, context, and reducers) included in ReactJS. Eric provides take-home code demos and GitHub projects you can fork as well as resources and links for more learning on the subject of React Hooks.
A thorough step-by-step guide for learning the basic and advanced Hooks (state, effects, context, and reducers) included in ReactJS. Eric provides take-home code demos and GitHub projects you can fork as well as resources and links for more learning on the subject of React Hooks.
How to fix the ugly focus ring and not break accessibility in React
Creating beautiful interfaces while maintaining accessibility has always been a challenge in the frontend. One barrier is the ugly “:focus” ring outline. Read on to learn how to figure out whether a focus outline should be shown using a React component. This helps you in making your sites more accessible without compromising on design.
Creating beautiful interfaces while maintaining accessibility has always been a challenge in the frontend. One barrier is the ugly “:focus” ring outline. Read on to learn how to figure out whether a focus outline should be shown using a React component. This helps you in making your sites more accessible without compromising on design.
Build a YouTube Clone Application Using React
In this video, you'll learn how to build a YouTube clone application from Scratch using React. This project covers lifecycle methods, project structure, destructuring, state management, passing props from parent to child components, API calls, and more.
In this video, you'll learn how to build a YouTube clone application from Scratch using React. This project covers lifecycle methods, project structure, destructuring, state management, passing props from parent to child components, API calls, and more.
❤️ Adopt Contributor Covenant
React is adopting the Contributor Covenant. It represents a shared understanding of what is expected form a healthy community.
https://github.com/facebook/react/pull/16613
React is adopting the Contributor Covenant. It represents a shared understanding of what is expected form a healthy community.
https://github.com/facebook/react/pull/16613
🛠 DevTools v4 Release
After months of development, the experimental DevTools rewrite is now public. A lot has changed in version 4, check out the blog post for more detail.
https://reactjs.org/blog/2019/08/15/new-react-devtools.html
After months of development, the experimental DevTools rewrite is now public. A lot has changed in version 4, check out the blog post for more detail.
https://reactjs.org/blog/2019/08/15/new-react-devtools.html
🌏 React Docs Localizations Update
The Arabic localizations is now complete:
• ar.reactjs.org
And the following localizations are now live:
• Azerbaijani: az.reactjs.org
• Bulgarian: bg.reactjs.org
• Indonesian: id.reactjs.org
• Mongolian: mn.reactjs.org
• Vietnamese: vi.reactjs.org
The Arabic localizations is now complete:
• ar.reactjs.org
And the following localizations are now live:
• Azerbaijani: az.reactjs.org
• Bulgarian: bg.reactjs.org
• Indonesian: id.reactjs.org
• Mongolian: mn.reactjs.org
• Vietnamese: vi.reactjs.org
ar.legacy.reactjs.org
React – مكتبة JavaScript لبناء واجهات المستخدم
A JavaScript library for building user interfaces
🚀 Babel Transform JSX to React.jsx/React.jsxDEV
As per the RFC for createElement changes, this change is an experimental fork of @babel/plugin-transform-react-jsx that transpiles to
https://github.com/facebook/react/pull/16432
As per the RFC for createElement changes, this change is an experimental fork of @babel/plugin-transform-react-jsx that transpiles to
React.jsx instead.https://github.com/facebook/react/pull/16432
🔄 Fast Refresh Explainer
Dan wrote an explainer of how a Fast Refresh integration for the Web could look like.
https://github.com/facebook/react/issues/16604#issuecomment-528663101
Dan wrote an explainer of how a Fast Refresh integration for the Web could look like.
https://github.com/facebook/react/issues/16604#issuecomment-528663101
💤 Partial Support for React.lazy() in Server Renderer
The Server Render now has partial support for lazy-loaded components.
https://github.com/facebook/react/pull/16383
The Server Render now has partial support for lazy-loaded components.
https://github.com/facebook/react/pull/16383
➡️ DevTools Moved into Core Repo
The DevTools are now part of the React Core repository. The previous repository now also directs to the Core one.
https://github.com/facebook/react/tree/master/packages/react-devtools
The DevTools are now part of the React Core repository. The previous repository now also directs to the Core one.
https://github.com/facebook/react/tree/master/packages/react-devtools
🎇 React Events Updates
• Tap Responder
• DOM Event Testing Library
• Support Screen Reader Virtual Clicks
• Rework the Responder Dispatching/Batching Mechanism
• Tap Responder
• DOM Event Testing Library
• Support Screen Reader Virtual Clicks
• Rework the Responder Dispatching/Batching Mechanism
⏱ Scheduler: Profiling Features
This change adds two new profiling features to Scheduler, a sample-based approach where profiling information is written into a SharedArrayBuffer and an event-based approach that also works during page initialization.
https://github.com/facebook/react/pull/16542
This change adds two new profiling features to Scheduler, a sample-based approach where profiling information is written into a SharedArrayBuffer and an event-based approach that also works during page initialization.
https://github.com/facebook/react/pull/16542
🔎 Experimental React Scope Component API
This PR adds an experimental
https://github.com/facebook/react/pull/16587
This PR adds an experimental
React.unstable_createScope for internal tests around focus management within React.https://github.com/facebook/react/pull/16587
The story of a V8 performance cliff in React
This article describes how V8 chooses optimal in-memory representations for various JavaScript values, and how that impacts the shape machinery — all of which helps explain a recent V8 performance cliff in React core.
This article describes how V8 chooses optimal in-memory representations for various JavaScript values, and how that impacts the shape machinery — all of which helps explain a recent V8 performance cliff in React core.
Why is React doing this?
Whenever Sebastian gives an explanation as to why React took a certain approach, it's probably best to listen. Here's one such example.
Whenever Sebastian gives an explanation as to why React took a certain approach, it's probably best to listen. Here's one such example.
React Microfrontends and Monorepos: A Perfect Match
In this article, you'll learn to use a monorepo when implementing a microfrontend architecture. You'll explore how this approach mitigates problems typically associated with microfrontends.
In this article, you'll learn to use a monorepo when implementing a microfrontend architecture. You'll explore how this approach mitigates problems typically associated with microfrontends.
Handling API request race conditions in React
You probably fetch some API data in your React apps, but have you covered the edge cases? Let's see what those edge cases are, when they happen, and how to avoid them.
You probably fetch some API data in your React apps, but have you covered the edge cases? Let's see what those edge cases are, when they happen, and how to avoid them.