Skip to content

Instantly share code, notes, and snippets.

Ryan Florence ryanflorence

View GitHub Profile
View react-three-routes.jsx
import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "react-three-fiber";
// yarn add react-router-dom@next history
import {

Route Config

I think I just figured out two major things I wanted to work out:

  1. Not sending the entire route config to the client, only the ones that matched and that are linked to on the page.

  2. Defining routes manually in replace of, or in addition to, the conventional file-system routes

The reason I've been hesitant on (2) is because of (1). Take a highly interactive blog where each article is a full blown React component like our blog instead of just markdown you can lookup and parse on the server.

View useUpdateEffect.js
// I've only used this for focus management, I'm willing to bet you don't
// actually want to do this unless it's focus management
function useUpdateEffect(effect, deps) {
let mounted = useRef(false)
useEffect(() => {
if (mounted.current) {
return effect()
} else {
mounted.current = true
View email-what-about-normalized-data.js
// probably just compose around useRouteData()
// loader
import { graphql } from "graphql"
import schema from "./schema"
export default async function({ params: query }) {
return await graphql(schema, query)
View email-what-about-subscriptions.js
// messages.load.js
export default async function() {
// messages.js
import useMessagesSubscription from '../your/code'
import { useRouteData } from "remix"
function Messages() {
View remix-server.jsx
import React from "react";
import { renderToNodeStream } from "react-dom/server";
import Remix, { loadRouteData } from "remix/RemixNode";
// same App as entry-web!
import App from "./App";
export default async (req, res, assets, matches) => {
// @remix-run/firebase is calling this function and passing
// the arguments in, @remix-run/aws or @remix-run/azure will
// pass in whatever APIs those platforms use
// you have total control over the server rendering, here we

Migrating @reach/router to React Router v6

Note: This document is still a work in progress! Please let us know where it lacks so we can make the migration as smooth as possible!


When we set out to build React Router v6, from the perspective of @reach/router users, we had these goals:

  • Keep the bundle size low. Turns out we got it smaller than @reach/router
View machine.js
const fetchMachine = Machine({
id: 'fetch',
initial: 'home',
states: {
home: {
on: {
target: 'dashboard',
actions: 'recordLoginTime'
View useNavFocus.js
// Focus Management
// Cases:
// 1. Navigate to sibling:
// [a] => [b*] : focus b
// [a, x, y] => [b*] : focus b
// 2. Navigate to child
// [a] => [a, b*] : focus b
You can’t perform that action at this time.