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.
6 tips for better React performance
This article walks through 6 tips for improving your React app's performance.
• Utilize render bail-out techniques
• Avoid inline objects
• Avoid anonymous functions
• Lazy load components that are not instantly needed
• Tweak CSS instead of forcing a component to mount & unmount
• Memoize expensive calculations
This article walks through 6 tips for improving your React app's performance.
• Utilize render bail-out techniques
• Avoid inline objects
• Avoid anonymous functions
• Lazy load components that are not instantly needed
• Tweak CSS instead of forcing a component to mount & unmount
• Memoize expensive calculations
How to Avoid the “Boolean Trap” When Designing React Components
What's wrong with this code?
What's wrong with this code?
<Button primary>Primary</Button>
<Button secondary>Secondary</Button>
<Button danger>Danger</Button>
Read the article and find out.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.
Don't call a React function component
In this article Kent breaks down the difference between React.createElement and calling a function component directly
In this article Kent breaks down the difference between React.createElement and calling a function component directly