🐌 Slightly Improve Performance of Hydration
By avoiding loading a property from the same node multiple times in a row, hydration is now a little bit faster.
https://github.com/facebook/react/pull/15998
By avoiding loading a property from the same node multiple times in a row, hydration is now a little bit faster.
https://github.com/facebook/react/pull/15998
🙅♀️ Fix Error Logging in
This PR fixes a bug in
https://github.com/facebook/react/pull/15797
getDerivedStateFromPropsThis PR fixes a bug in
getDerivedStateFromError where errors are not logged when an error occurs.https://github.com/facebook/react/pull/15797
🎇 React Flare Updates
These changes (and more) have been made to React Flare:
• React Native Fabric Support.
• useEvent() and responder specific hooks were added.
• Event targets were removed.
These changes (and more) have been made to React Flare:
• React Native Fabric Support.
• useEvent() and responder specific hooks were added.
• Event targets were removed.
🔄 React Fresh Updates
• Track Mounted Roots via DevTools Hook.
• The babel plugin now throws when applied in production.
• Require-like calls are no longer considered to be HOCs.
• Track Mounted Roots via DevTools Hook.
• The babel plugin now throws when applied in production.
• Require-like calls are no longer considered to be HOCs.
Announcing styled-components v5: Beast Mode
50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes!
50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes!
Add useEvent hook implementation
This PR adds a new primitive hook to React called useEvent. For now it's behind the React Flare flag and is labelled unstabled_useEvent on the React object. This implementation might have bugs in, as it's not been hooked up and tested with the various event responder modules, like Press, Hover etc. This isn't intended to be a bug-free PR, more it's an initial implementation that should aim to get the wiring right between fibers and the hook.
This PR adds a new primitive hook to React called useEvent. For now it's behind the React Flare flag and is labelled unstabled_useEvent on the React object. This implementation might have bugs in, as it's not been hooked up and tested with the various event responder modules, like Press, Hover etc. This isn't intended to be a bug-free PR, more it's an initial implementation that should aim to get the wiring right between fibers and the hook.
Redux Now Has Hooks. A Before and After Comparison
react-redux now includes some Hooks. This post walks through what those new Hooks are and how they may be helpful.
react-redux now includes some Hooks. This post walks through what those new Hooks are and how they may be helpful.
Why I'm using react-testing-library instead of Enzyme
When Hooks came out, Antoine started exploring other testing solutions in the React ecosystem. This is a write-up of his journey.
When Hooks came out, Antoine started exploring other testing solutions in the React ecosystem. This is a write-up of his journey.
The Complete Guide to React Refs
In this post, you will learn how to properly use refs, how to use the current API, and decide when to approach one over the other.
In this post, you will learn how to properly use refs, how to use the current API, and decide when to approach one over the other.
Buffet.js - React component library based on styled-components
The purpose of Buffet.js - an all-you-can-eat component library - is to give to the community a faster, easier and better way to develop both their private and public plugins and also, to allow us to set up a stronger design system which can be easily updated.
The purpose of Buffet.js - an all-you-can-eat component library - is to give to the community a faster, easier and better way to develop both their private and public plugins and also, to allow us to set up a stronger design system which can be easily updated.
react-conflux
Conflux is a modularized state management system utilizing the Context API and React Hooks for the React ecosystem. It provides predictable and optionally-nested state containers for applications in an elegant, streamlined, and developer-friendly manner.
Conflux is a modularized state management system utilizing the Context API and React Hooks for the React ecosystem. It provides predictable and optionally-nested state containers for applications in an elegant, streamlined, and developer-friendly manner.
effector
Effector lets you write simple, fast and type safe code and manage reactive state with ease.
Benefits:
- statically typed
- multi-store
- less boilerplate by design
- computed values
- no need for memoization
- side-effect management
- framework agnostic
- observable interoperability
- relatively small size
Effector lets you write simple, fast and type safe code and manage reactive state with ease.
Benefits:
- statically typed
- multi-store
- less boilerplate by design
- computed values
- no need for memoization
- side-effect management
- framework agnostic
- observable interoperability
- relatively small size
Forget about component lifecycles and start thinking in effects
React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place. This article breaks it down.
React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place. This article breaks it down.
The 10 Component Commandments
Creating components that are used by a lot of people is hard. You have to think pretty carefully about what props you should accept, if those props are supposed to be part of a public API. This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.
Creating components that are used by a lot of people is hard. You have to think pretty carefully about what props you should accept, if those props are supposed to be part of a public API. This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.
Add Netlify Identity Authentication to any React App in 5 minutes with React Context, Hooks and Suspense - DEV Community 👩💻👨💻
This article is about effective design patterns for introducing authentication into React apps, and any reader should be able to write similar wrappers for their preferred provider.
This article is about effective design patterns for introducing authentication into React apps, and any reader should be able to write similar wrappers for their preferred provider.
React Fiber Deep Dive with Dan Abramov
Jani and Phil got a problem. There are too many divs! With the help of Jenn Creighton and special guest Dan Abramov, we learn how to hack React Fiber reconciler internals to make the world a less div-ided place.
Jani and Phil got a problem. There are too many divs! With the help of Jenn Creighton and special guest Dan Abramov, we learn how to hack React Fiber reconciler internals to make the world a less div-ided place.
Let's learn React Hooks and Context API by building a Recipe Search App
This is a beginner tutorial in understanding React Hooks and the Context API. This will be in two parts with this first part focusing on the basics of hooks. The other part will hopefully focus more on more advanced use cases and the Context API. You'll implement the search functionality and convert to using the Context API for managing states and avoiding props drilling.
This is a beginner tutorial in understanding React Hooks and the Context API. This will be in two parts with this first part focusing on the basics of hooks. The other part will hopefully focus more on more advanced use cases and the Context API. You'll implement the search functionality and convert to using the Context API for managing states and avoiding props drilling.
Best React open-source projects
It is no secret that every great developer should be committed to open source projects. It is useful for personal professional development as well as for the technology ecosystem. But how do you choose the right project for your spare time efforts? In this article, you'll get a brief answer on how to choose a good open source project.
It is no secret that every great developer should be committed to open source projects. It is useful for personal professional development as well as for the technology ecosystem. But how do you choose the right project for your spare time efforts? In this article, you'll get a brief answer on how to choose a good open source project.
🎬 SuspenseList Updates
The new
• A tail="collapsed" option.
• A warning, when single items are used.
• And various other optimizations.
The new
<SuspenseList /> component to coordinate the loading sequence of nested suspense boundaries now comes with:• A tail="collapsed" option.
• A warning, when single items are used.
• And various other optimizations.
⏳ Scheduler: Allow Inferring Priority from Stack
To help finding out at what priority level specific tasks are enqueued, the call stack now wraps every priority inside an additional function call.
https://github.com/facebook/react/pull/16105
To help finding out at what priority level specific tasks are enqueued, the call stack now wraps every priority inside an additional function call.
https://github.com/facebook/react/pull/16105
🧪 Allow Nested
Multiple renders can now operate inside a single
https://github.com/facebook/react/pull/16039
act()s from Different RenderersMultiple renders can now operate inside a single
act() scope. This allows for e.g. using ReactDOM.render inside another component tree.https://github.com/facebook/react/pull/16039