Skip to content

Instantly share code, notes, and snippets.

Avatar

Tanner Linsley tannerlinsley

View GitHub Profile
View FrameworkGenerics.ts
// my-core
interface FrameworkGenerics<TData = unknown> {
// Options: unknown
}
type GetFrameworkGeneric<
U,
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]))
.filter(Boolean)
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) {
reactivateFn()
@tannerlinsley
tannerlinsley / Table.tsx
Last active Jan 3, 2022
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
tannerlinsley / useBroadcastLeader.ts
Created Jun 4, 2021
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
tannerlinsley / React Query v4 (Ezil Amron) RFC.md
Last active Jun 4, 2021
An RFC to rewrite React Query's API to allow for opt-in normalization
View React Query v4 (Ezil Amron) RFC.md

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
@tannerlinsley
tannerlinsley / examples.ts
Last active Jan 22, 2021
Generic Mapping in Typescript Example
View examples.ts
import { Merge } from 'type-fest'
type MergeGenerics<TDefaultGenerics, TUserGenerics> = Merge<
Required<TDefaultGenerics>,
TUserGenerics
>
interface Person {
name: string
@tannerlinsley
tannerlinsley / createCrudHooks.js
Created Nov 29, 2020
A naive, but efficient starter to generate crud hooks for React Query
View createCrudHooks.js
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,
updateFn,
deleteFn,
}) {
const useIndex = (config) => useQuery([baseKey], indexFn, config)
const useSingle = (id, config) =>