Four patterns for global state with React hooks: Context or Redux

Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? In this post, Daishi would like to show four patterns toward using Redux.

Better Apps with React Server-Side Rendering

A post from the Riot Games tech blog about how they use React to make faster web apps.

🐞 Experimental DevTools Updates
The new DevTools now show you exactly the reason why a component rerendered, including which prop changed and more.

https://github.com/bvaughn/react-devtools-experimental

⛑ Remove Feature Flag to Disable Yielding
The feature flag added to disable yielding in Concurrent Mode was superset by the new Batched Mode.

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

🎇 React Flare Updates
These changes have been made to the React Flare:
• Listen to Document.Body and Add stopPropagation to Press
• Move Press Root Event Removal to Click Phase
• Root Events Are Removed on contextmenu

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

🎨 Use !important to Hide Suspended Nodes
To make sure suspended nodes are hidden even if custom CSS would overwrite it, it’s now using !important using style.setProperty.

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

🔄 React Fresh Updates
More work on React Fresh:
• Reset State on Edits to Initial State Arguments and More
• Make Transform Resilient to Plugin Order

When to useMemo and useCallback

Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. In this post Kent breaks down those costs (and benefits) of useMemo and useCallback.

react-redux v7.1.0 released

react-redux v7.1.0 (the one with Hooks) was released this week.

🎇 Rethinking Focus
In this GitHub issue, the team outlines a proposal that rethinks how focus is managed in React apps. Get involved!

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

🎬 SuspenseList
A new <SuspenseList> component can be used to coordinate the loading sequence of nested suspense boundaries. It includes backwards and forwards options and the ability to expire rendering of the tail after a timeout.

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

⏱ Scheduler: Delay Option
A new option was added to the scheduler API to allow callbacks to only run after a specific delay has passed.

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

⚛️🛠 Experimental DevTools: Owner Tree
Check out this Twitter thread by Brian to learn more about the Owner Tree view coming to the new DevTools. The team is also working on React Native support.

https://twitter.com/brian_d_vaughn/status/1144262284912582657

⏲ Scheduler: Use isInputPending()
isInputPending(), a new API to check if the browser has events enqueued, is now used inside the Scheduler behind a feature flag.

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

🧪 Warn If Passive Effects Get Queued Outside of act()
With this change, React will now warn when effects are queued outside of an act() call.

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

⏰ Scheduler: requestPaint()
The requestPaint() API is used by React to signalize the Scheduler that it needs to yield to let the browser paint the page. This is necessary since the new use of isInputPending() would otherwise cause the Scheduler to run more low-priority work.

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

🧽 Construct Error at Invariant Call Site
Invariant Errors are now constructed directly at call site to remove one level of the call stack.

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

🔎 Support for ESLint 6.0.0
Thanks to a contribution by Thomas Broyer, the ESLint plugin now works with 6.0.0

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

🐌 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

🙅‍♀️ Fix Error Logging in getDerivedStateFromProps
This 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.