How to Use the useContext Hook in React
This tutorial explores the React useContext Hook by walking you through the building of a media player. It also describes the benefits of using React Context in long component trees, When to add state to a Context, the benefits of abstracting out common logic into a custom React Hook, and more.
This tutorial explores the React useContext Hook by walking you through the building of a media player. It also describes the benefits of using React Context in long component trees, When to add state to a Context, the benefits of abstracting out common logic into a custom React Hook, and more.
React Dashboard Guide
This is helpful guide for building dynamic analytics dashboards and applications with React, GraphQL, and Cube.js.
This is helpful guide for building dynamic analytics dashboards and applications with React, GraphQL, and Cube.js.
react-zen: React utilities for working with APIs
Suspense enabled hooks to Automatically fetch and purge snapshots from REST APIs, Supports manual updates/refreshes.
Suspense enabled hooks to Automatically fetch and purge snapshots from REST APIs, Supports manual updates/refreshes.
Formik 2.0 - Build forms in React, without the tears
Formik is a small library that helps you with the 3 most annoying parts of building forms in React:
1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission
By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.
Formik is a small library that helps you with the 3 most annoying parts of building forms in React:
1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission
By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.
SWR - React Hooks for Remote Data Fetching
SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. The name “SWR” is derived from
SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. The name “SWR” is derived from
stale-while-revalidate, a HTTP cache invalidation strategy popularized by RFC 5861.Building Great User Experiences with Concurrent Mode and Suspense
In this article, Joseph Savona (from the Relay team) introduces best practices for using Concurrent Mode and Suspense. Like Dan's project, this post is most relevant to people working on data fetching libraries in React.
In this article, Joseph Savona (from the Relay team) introduces best practices for using Concurrent Mode and Suspense. Like Dan's project, this post is most relevant to people working on data fetching libraries in React.
Experimenting React Concurrent mode
In this article, Swizec Teller writes about his early experiments with Concurrent mode and React Suspense and discusses what new abilities this update unlocks for developers.
In this article, Swizec Teller writes about his early experiments with Concurrent mode and React Suspense and discusses what new abilities this update unlocks for developers.
React Query Library
This is a library of Hooks for fetching, caching, and updating asynchronous data in React.
This is a library of Hooks for fetching, caching, and updating asynchronous data in React.
Making Instagram.com faster: Part 1 - Instagram Engineering
In recent years, instagram.com has seen a lot of changes — they’ve launched stories, filters, creation tools, notifications, and direct messaging as well as myriad other features and enhancements. However, as the product grew, one unfortunate side effect was that their web performance began to suffer. Over the last year, they made a conscious effort to improve this. Their ongoing efforts have thus far resulted in almost 50% cumulative improvement to their feed page load time. This series of blog posts will outline some of the work they’ve done that led to these improvements.
In recent years, instagram.com has seen a lot of changes — they’ve launched stories, filters, creation tools, notifications, and direct messaging as well as myriad other features and enhancements. However, as the product grew, one unfortunate side effect was that their web performance began to suffer. Over the last year, they made a conscious effort to improve this. Their ongoing efforts have thus far resulted in almost 50% cumulative improvement to their feed page load time. This series of blog posts will outline some of the work they’ve done that led to these improvements.
Medium
Making Instagram.com faster: Part 1
In recent years instagram.com has seen a lot of changes — we’ve launched stories, filters, creation tools, notifications, and direct…
React Adaptive Loading Hooks & Utilities
This is a suite of React Hooks and utilities for adaptive loading based on a user's network via effective connection type, data saver preferences, device memory, and logical CPU cores. It makes it easier to target low-end devices while progressively adding high-end-only features on top, so that you give users a great experience that's best suited to their device and network constraints.
This is a suite of React Hooks and utilities for adaptive loading based on a user's network via effective connection type, data saver preferences, device memory, and logical CPU cores. It makes it easier to target low-end devices while progressively adding high-end-only features on top, so that you give users a great experience that's best suited to their device and network constraints.
react-interactive-paycard
A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive
A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive
Why Suspense matters, a short thread | Dan Abramov
Tl;dr about the "why" behind React Suspense from Dan Abramov. This links to a rolled-up version of Dan's original Twitter thread from Thread Reader (because readability).
Tl;dr about the "why" behind React Suspense from Dan Abramov. This links to a rolled-up version of Dan's original Twitter thread from Thread Reader (because readability).
Redux Toolkit
The official, opinionated, batteries-included toolset for efficient Redux development. Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
The official, opinionated, batteries-included toolset for efficient Redux development. Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
React component library: Develop a multilingual app
While there are many international libraries to choose from, which one should you go with? This article analyzes 4 (React-intl, React-i18next, React-intl-universal, @lingui/react) of them to make your decision easier.
While there are many international libraries to choose from, which one should you go with? This article analyzes 4 (React-intl, React-i18next, React-intl-universal, @lingui/react) of them to make your decision easier.
Create a Modern Dynamic Sidebar Menu in React Using Recursion
This tutorial will walk you through building a modern sidebar in react using recursion. Recursion is a technique in which a function simply calls itself repeatedly until a condition has been met.
This tutorial will walk you through building a modern sidebar in react using recursion. Recursion is a technique in which a function simply calls itself repeatedly until a condition has been met.
Reactime 3.0 — Time Traveling State Debugger
Reactime is an open-source Chrome developer tool — inspired by Redux DevTools — which allows developers to visually inspect the state of their app at any given moment, step forwards or backwards through time, import and export a snapshot of their current state and persist state across refreshes.
Reactime is an open-source Chrome developer tool — inspired by Redux DevTools — which allows developers to visually inspect the state of their app at any given moment, step forwards or backwards through time, import and export a snapshot of their current state and persist state across refreshes.
Redux Style Guide
This is the Redux team's official style guide for writing Redux code. It lists recommended patterns, best practices, and suggested approaches for writing Redux applications.
This is the Redux team's official style guide for writing Redux code. It lists recommended patterns, best practices, and suggested approaches for writing Redux applications.
Interactive React Paycard
This is a fully responsive credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection.
This is a fully responsive credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection.
Best practices for building a large scale react application
While making a Single Page App with React, it is very easy for your code-base to become unorganized. There are many good libraries in the React ecosystem that can be used to manage certain aspects of the app, this article covers some of them in depth. Other than that, it lists some good practices to follow from the beginning of the project if you have scalability in mind
While making a Single Page App with React, it is very easy for your code-base to become unorganized. There are many good libraries in the React ecosystem that can be used to manage certain aspects of the app, this article covers some of them in depth. Other than that, it lists some good practices to follow from the beginning of the project if you have scalability in mind
Introducing Base Web, Uber’s New Design System for Building Websites in React
At Uber, they have hundreds of internal web applications used by developers, product managers, and operations teams—essentially everyone at the company. Since all web applications work differently, it puts additional overhead on our employees to learn how to interact with them most effectively. To solve these issues, Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system. Open sourced in 2018, Base Web is a React component library implementing the Base design language that acts as a device-agnostic foundation for quickly and easily creating web applications.
At Uber, they have hundreds of internal web applications used by developers, product managers, and operations teams—essentially everyone at the company. Since all web applications work differently, it puts additional overhead on our employees to learn how to interact with them most effectively. To solve these issues, Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system. Open sourced in 2018, Base Web is a React component library implementing the Base design language that acts as a device-agnostic foundation for quickly and easily creating web applications.
14 Beneficial Tips to Write Cleaner Code in React Apps
Every developer wrestles with how to write cleaner code. This article gives 14 practical tips for how to do just that when developing a React app.
Every developer wrestles with how to write cleaner code. This article gives 14 practical tips for how to do just that when developing a React app.