Skip to content

Instantly share code, notes, and snippets.

View tannerlinsley's full-sized avatar

Tanner Linsley tannerlinsley

View GitHub Profile

This middleware does a few interesting things:

  • Ensures a url shape in the zustand store, where we'll store URL information.
  • Assumes we will be storing our url state slice in the ?state search parameter after it has been stringified and base 64 encoded.
  • On creation, decodes stores state from the ?state search parameter into the url slice of our store.
  • After each state update, updates the ?state search parameter with the new url state slice.
  • Sets up an event listener that listens for popstate and re-decodes the state from the URL into our store.
View ObservablePlot.tsx
import * as React from 'react'
import * as Plot from '@observablehq/plot'
import useRect from '../hooks/useRect'
import { twMerge } from 'tailwind-merge'
import { useThemeMode } from '../utils/Theme'
import { data } from '../utils/DataColors'
export function ObservablePlot({
legendType = 'color',
View FrameworkGenerics.ts
// my-core
interface FrameworkGenerics<TData = unknown> {
// Options: unknown
type GetFrameworkGeneric<
TData = unknown,
> = U extends keyof FrameworkGenerics<TData>
View deepDiff.ts
export function deepDiff<TObj extends object>(a: TObj, b: TObj) {
if (Array.isArray(a)) {
const changes = a
.map((item, index) => deepDiff(item, b[index]))
return changes.length ? changes : undefined
if (isObject(a)) {
View useOnIdle.js
import * as React from 'react'
let activeTimeout = null
let reactivateFn = null
export function useOnIdle(fn, time) {
React.useEffect(() => {
const onUsage = () => {
if (reactivateFn) {
tannerlinsley / Table.tsx
Last active November 15, 2023 19:53
A quick snippet of an early ReactTable v8 table that renders!
View Table.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { createTable } from 'react-table'
type Row = {
firstName: string
lastName: string
View treeFromPathMap.ts
import { multiSortBy } from 'src/shared/utils'
export type PathNode<T> = {
id: string
path: string
parentId: string
meta: T
children?: PathNode<T>[]
View logs.txt
"message": [
"Requesting backblaze auth..."
"level": "log",
"timestamp": 1638577536200
"message": [
"btoa error",
tannerlinsley / useBroadcastLeader.ts
Created June 4, 2021 14:37
A React Hook to determine if a tab of your application is the "leader" using BroadcastChannel and leader election
View useBroadcastLeader.ts
import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
import React from 'react'
const channels = {}
export function useBroadcastLeader(id = 'default') {
const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)
React.useEffect(() => {
if (!channels[id]) {
tannerlinsley / React Query v4 (Ezil Amron)
Last active June 4, 2021 15:07
An RFC to rewrite React Query's API to allow for opt-in normalization
View React Query v4 (Ezil Amron)

React Query v4 (Ezil Amron) RFC

Preface: This is an RFC, which means the concepts outlined here are a work in progress. You are reading this RFC because we need your help to discover edge cases, ask the right questions and offer feedback on how this RFC could improve.

What are we missing today without normalization?

Today, React Query uses unstructured query keys to uniquely identify queries in your application. This essentially means RQ behaves like a big key-value store and uses your query keys as the primary keys. While this makes things conceptually simple to implement and reason about on the surface, it does make other optimizations difficult (and a few others impossible):

  • Finding and using Initial/placeholder single-item queries from list-like queries. While this is possible today, it's very manual, tedious, and prone to error.
  • Manual optimistic updates that span multiple query types and shapes (eg. single-item queries, list queries and infinitely-paginated queries) are tedious and pr