Persistent Layout Patterns in Next.js
In this article, Adam Wathan explains four main patterns for persistent layouts in Next.js applications.
In this article, Adam Wathan explains four main patterns for persistent layouts in Next.js applications.
Build your own React in 90 lines of JavaScript
When Ameer started learning React, he felt whatever it did was pure magic, then he started to wonder what were the actual ingredients of this magic. He started to freak out when he realized whatever React does is very simple and you can build it with few lines of JavaScript if you are not betting on it for our next big startup. This is what has motivated him to write this article and hopefully after reading this, you will also feel the same way.
When Ameer started learning React, he felt whatever it did was pure magic, then he started to wonder what were the actual ingredients of this magic. He started to freak out when he realized whatever React does is very simple and you can build it with few lines of JavaScript if you are not betting on it for our next big startup. This is what has motivated him to write this article and hopefully after reading this, you will also feel the same way.
Suspense Demo for Library Authors | Dan Abramov
This project is built with Suspense and is meant to demonstrate
This project is built with Suspense and is meant to demonstrate
render-as-you-fetch. In Dan's own words: "It is highly experimental and primarily aimed at library authors!"Why Is React Concurrent Mode Exciting?
Last week the React team released an experimental version of Concurrent Mode to the public. It's been in development for over a year and the React community has been very excited about its release. What is Concurrent Mode? The documentation pages has a nice and concise denoscription: "Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed." However if you don't know how Concurrent Mode works or what it actually lets you do you may be left wondering, "Why all the excitement?" If that's you then this blog post is for you.
Last week the React team released an experimental version of Concurrent Mode to the public. It's been in development for over a year and the React community has been very excited about its release. What is Concurrent Mode? The documentation pages has a nice and concise denoscription: "Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed." However if you don't know how Concurrent Mode works or what it actually lets you do you may be left wondering, "Why all the excitement?" If that's you then this blog post is for you.
Why React Hooks?
When React Hooks were released, React was the most popular and most loved front-end framework in the JavaScript ecosystem. In this post, you'll learn why, despite existing praise, the React team dedicated so many resources to creating and releasing Hooks. Along the way, you'll also get a soft introduction to the main aspects of the Hooks API.
When React Hooks were released, React was the most popular and most loved front-end framework in the JavaScript ecosystem. In this post, you'll learn why, despite existing praise, the React team dedicated so many resources to creating and releasing Hooks. Along the way, you'll also get a soft introduction to the main aspects of the Hooks API.
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.