Premature Optimize the Heck Out of Your React Apps Using Memoization

This article will take a simple non-optimized React app and then incrementally improve the app's performance by using the useCallback and useMemo hooks, along with the React.memo higher order component.

Build a React Switch Toggle Component

Learn how to build a React switch component using the native HTML checkbox input! You’ll learn plenty about React checkboxes in the process.

Animate React with Framer Motion

Framer-motion is a library that powers animations in Framer. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with a minimal amount of code. In this article, you’ll start with very basic animations and gradually move to the more advanced ones.

🎉 React v16.9

A new minor version of React is out! It includes new deprecations, async act(), <React.Profiler> and more. Make sure to also check out the updated timelines for future features in the announcement post.

https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

🗼 Babel 7

This change upgrades the codebase from using Babel 6 to Babel 7.

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

📝 Testing Docs

The documentation now features a new testing section. The documentation includes explanation of different tradeoffs, common patterns, and different test environments.

https://reactjs.org/docs/testing.html

✍️ Profiler API Docs

This new documentation entries explain how to use the <Profiler/> API.

https://reactjs.org/docs/profiler.html

⏰ Scheduler: Yield Many times per frame, No rAF

A new experimental flag that changes the scheduling logic to yield many times per frame instead of guessing the next VSync using requestAnimationFrame.

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

⏳ Scheduler: Store Tasks on a Min Binary Heap

A min binary heap has better performance characteristics for implementing a priority queue.

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

🎇 React Flare Updates

• Tweaks to Flare System Design and API
• Add ContextMenu Responder
• Remove FocusScope Responder

🔄 Fresh Updates

• Transfer Refs When Remounting
• Support Multiple Renderers at the Same Time

🚩 Add Feature Flag to Disable Legacy Context

The team is experimenting with modern builds of React which disables legacy features. The open source build is unaffected by this change.

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

🥅 Fix Priority of Clean-Up Function on Deletion

This PR fixes the priority of the cleanup function returned from an useEffect() hook when the component (or a parent) was deleted from the tree.

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

🐛 Effects Should Not Have Higher than Normal Priority

This diff fixes a bug that sometimes caused effects to be flushed early.

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

Styled Typography

Typograpy components for react and styled-components.

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."

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: 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.

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.

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.

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.