How Discord Implemented App-Wide Keyboard Navigation

When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, padding got in the way. So they set out to find a solution.

After a lot of trial and error, we landed on a system which is built on two components: FocusRing for declaring where a ring should be placed, and FocusRingScope for declaring a root position for rings to be rendered.

Here’s an example showing how the FocusRing works:

function SearchBar() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);
  return (
    <FocusRing focusTarget={inputRef} ringTarget={containerRef}>
      <div className={styles.container} ref={containerRef}>
        <input type="text" ref={inputRef} placeholder="Search" />
        <div className={styles.icon}>
          <ClearIcon />
        </div>
      </div>
    </FocusRing>
  );
}

The FocusRing will capture focussing of the contained input, but will render the ring around the entire div. To have a FocusRing behave like :focus-within and respond to any descendant being focussed, you can set the within prop.

The package can be installed using NPM:

npm i react-focus-rings

How Discord Implemented App-Wide Keyboard Navigation →
Browser Focus Ring Problems →
react-focus-rings (GitHub) →

Related: Not entirely coincidental the aforementioned React Spectrum by Adobe also comes with a FocusRing component.

Data Fetching with React Server Components

Just announced by the React Team are Server Components:

React Server Components are still in research and development. We are sharing this work in the spirit of transparency and to get initial feedback from the React community.

With Server Side Rendering the rendering of your app to HTML happens up front, gets sent to the client, and then needs to be hydrated once the bundle is loaded. After that the app becomes interactive and every change/render happens on the client. With React Server Components, the HTML for each component can be fetched several times from the server throughout the app’s lifecycle, and certain libraries that are only used on the server won’t ever make it into the bundle.

Knowing that the folks from Next.js are also involved makes this even more exciting …

“React Notes” Source →
Server Components RFC →

How to useRef to Fix React Performance Issues

Sidney Alcantara who works on Firetable, a product which features a data grid and an adjacent side drawer. When clicking a cell in the table, the side drawer opens with info about the current cell. Initially they lifted up the state, but that caused performance issues:

The problem was whenever the user selected a cell or opened the side drawer, the update to this global context would cause the entire app to re-render. This included the main table component, which could have dozens of cells displayed at a time, each with its own editor component. This would result in a render time of around 650 ms(!), long enough to see a visible delay in the side drawer’s open animation.

After exploring to split the context, or resort to useMemo/React.memo they settled on useRef to solve this.

Good use-case and detailed write-up!

How to useRef to Fix React Performance Issues →

10 ways to deploy a React app for free

If you’re looking for an intro on how to deploy your React app to Vercel, Firebase, Netlify, GitHub Pages, Heroku, etc. this page has got you covered. Comes with easy to follow instructions.

10 ways to deploy a React app for free →

The several ways to import React

With the release of React 17 we also had to change the way we import React:

Kent C. Dodds goes over all ways to import React into your code, and explains why the good ole import React from "react" no longer works and why he went for import * as React from "react"

Importing React Through the Ages →

React v17.0: A “Stepping Stone” Release

No new features, but a lot of changes, paving the way for future releases.

The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself.

We’re actively working on the new React features, but they’re not a part of this release. The React 17 release is a key part of our strategy to roll them out without leaving anyone behind.

In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.

Here are the major changes:

  1. Changes to Event Delegation
  2. No Event Pooling
  3. Effect Cleanup Timing Change
  4. Consistent Errors for Returning undefined
  5. Methods of removing private exports

React v17.0 Release Candidate: No New Features →

The Opinionated Guide to React

Sara Vieira (@NikkitaFTW) published her book “The Opinionated Guide to React”. It’s 190 pages of React Recipes and Code Examples.

This book is my personal map of the tips, power-ups and not-so-obvious solutions to common questions and problems that I’ve come across during 4 years of React development. I have been finding some of the cheat codes and share them with you.

Even though I’m a seasoned React Developer, I’ve bought the book as:

  1. It’s quite a steal at $30
  2. It’s how you can support other devs

It was a pleasure to see many of the approaches I take – and teach about in my workshop React from Scratch – get confirmed in the book.

The Opinionated Guide to React →

React Refresh Webpack Plugin

If you’re using React Hot Loader, it’s time to start looking at React Refresh Webpack Plugin, an EXPERIMENTAL Webpack plugin to enable “Fast Refresh(which you might know from React Native) for React components. It’s also to be included with Create React App version 4.0 (now in alpha).

Installation per NPM/Yarn:

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

Once installed you must also adjust your Webpack and Babel configs to activate it.

React Refresh Webpack Plugin →

🙀 In case you’re a bit scared by that EXPERIMENTAL word in there, here’s what Dan Abramov – author of React Hot Loader, amongst many other things – says about it:

React Spectrum – A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

By Adobe:

React Spectrum includes three libraries:

  • React Spectrum — A React implementation of Spectrum, Adobe’s design system.
  • React Aria — A library of React Hooks that provides accessible UI primitives for your design system.
  • React Stately — A library of React Hooks that provides cross-platform state management and core logic for your design system.

React Spectrum →

How Records & Tuples will improve React

Covered here before are Records and Tuples, two Immutable Datastructures most likely coming to JavaScript. Sebastien Lorber takes a look at how these will improve React.

A whole category of React bugs are related to unstable object identities:

  • Performance: can trigger re-renders that could be avoided
  • Behavior: can trigger useless effect re-executions, and lead to infinite loops
  • API surface: we don’t have a way to express when a stable object identity matters

I will explain the basics of Records & Tuples, and how they can solve real world React issues.

Records & Tuples for React →