Tag Archives: react

Remix v1 Beta Launch Video

Michael Jackson and Ryan Florence recently launched the v1 beta of the aforementioned Remix.

Through lots of live code, Ryan and Michael will tell you all about where Remix started, where it’s at now, and what this v1 Beta launch means for one of the most exciting web frameworks today.

If you’re into React, be sure to watch this — especially the part at the 31 minute mark … you’ll love the final code to solve that specific problem 😍

What’s especially to love is that Remix embraces the fundamentals of the web: fetch API, Request, Response, URLSearchParams, etc.

SWR — React Hooks library for data fetching

From the Next.js folks comes SWR, a React Hooks library for data fetching built on Suspense:

The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

It can avoid scenarios where you need to pass down a fetched user into several child components

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function useUser (id) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher)

  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}
// page component
function Page () {
  return <div>
    <Navbar />
    <Content />
  </div>
}

// child components
function Navbar () {
  return <div>
    ...
    <Avatar />
  </div>
}

function Content () {
  const { user, isLoading } = useUser()
  if (isLoading) return <Spinner />
  return <h1>Welcome back, {user.name}</h1>
}

function Avatar () {
  const { user, isLoading } = useUser()
  if (isLoading) return <Spinner />
  return <img src={user.avatar} alt={user.name} />
}

With SWR being used, this will result in only 1 request to /api/user/${id}.

The most beautiful thing is that there will be only 1 request sent to the API, because they use the same SWR key and the request is deduped, cached and shared automatically.

SWR — React Hooks library for data fetching →

Before You React.memo()

Dan Abramov shares 2 techniques to try before resorting to optimize with React.memo()

In this post, I want to share two different techniques. They’re surprisingly basic, which is why people rarely realize they improve rendering performance.

These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good to try first.

Covered Solutions:

  1. Move State Down
  2. Lift Content Up

Before You memo() →

Related:

Remotion – Create videos programmatically in React

Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Also comes with a handy player that allows you to scrub through the timeline. And yes, that demo video above is made with Remotion … #eatyourowndogfood

Here’s another example created with Remotion:

Neat! The code behind those videos is pretty dazzling though! 😵

Remotion – Create videos programmatically in React →
Remotion Source (GitHub) →

Easily include Blurhash placeholders in your React projects with react-blurhash

react-blurhash allows you to easily integrate Blurhash Placeholder Images images in your React Projects:

Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and resolutionY props.

Installation per NPM

npm install --save blurhash react-blurhash

Example Usage:

import './App.css';
import { Blurhash } from "react-blurhash";


function App() {
  return (
    <div className="App">
      <Blurhash
        hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"
        width={600}
        height={400}
      />

      <img
        src="https://example.org/original.jpg"
        width={600}
        height={400}
      />
    </div>
  );
}

export default App;

react-blurhash (GitHub) →

Tao of React – Software Design, Architecture & Best Practices

Alex Kondov, Tech Lead at Financial Times, has compiled a huge list of best practices when it comes to writing React.

This article is a collection of principles and rules that have proven to be effective for me and the teams I’ve worked with.

I outline good practices about components, application structure, testing, styling, state management and data fetching. Some of the examples are oversimplified so we can focus on the principle not on the implementation.

Although Alex warns that it’s an opinion and not an absolute, the TOC alone — except for the CSS-in-JS part 😛 — already has me nodding along:

  • Components

    • Favor Functional Components
    • Write Consistent Components
    • Name Components
    • Organize Helper Functions
    • Don’t Hardcode Markup
    • Component Length
    • Component Length
    • Write Comments
    • Use Error Boundaries
    • Destructure Props
    • Number of Props
    • Use Objects Instead of Primitives
    • Conditional Rendering
    • Avoid Nested Ternary Operators
    • Move Lists in Components
    • Assign Default Props When Destructuring
    • Avoid Nested Render Functions
    • Prefer Hooks

  • State Management

    • Use Reducers
    • Use Data Fetching Libraries
    • State Management Libraries

  • Component Mental models

    • Container and Presentational
    • Stateless and Stateful

  • Application Structure

    • Group by Route/Module
    • Create a Common Module
    • Use Absolute Paths
    • Wrap External Components
    • Move Components in Folders

  • Performance

    • Don’t Optimize Prematurely
    • Watch Bundle Size
    • Rerenders – Callbacks, Arrays and Objects

  • Testing

    • Don’t Rely on Snapshot Tests
    • Test Correct Rendering
    • Validate State and Events
    • Test Edge Cases
    • Write Integration Tests

  • Styling

    • Use CSS-in-JS
    • Keep Styled Components Together

  • Data Fetching

    • Use a Data Fetching Library

Amazing work, Alex!

Tao of React – Software Design, Architecture & Best Practices →

Via Lode

Creating A React App From Scratch Using Snowpack

Short intro video on how to use Snowpack to build a React Application:

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 →