Skip to content

Instantly share code, notes, and snippets.

Avatar
🍕
please

James jamesplease

🍕
please
View GitHub Profile
View 1.uage.ts
import { QueryHistory } from 'query-history';
interface QueryShape {
pasta?: string;
hello?: boolean;
}
type AppHistory = QueryHistory<QueryShape>;
export default function App() {
View overload.ts
enum Choice {
yes = 'yes',
no = 'no'
}
interface YesOption {
cheese: boolean;
}
interface NoOption {
View update.js
import { useReducer, useEffect, useRef } from "react";
const NO_UPDATE_SYMBOL = Symbol("NO_UPDATE_SYMBOL");
export const Update = state => ({ state });
export const NoUpdate = () => NO_UPDATE_SYMBOL;
export const UpdateWithSideEffect = (state, sideEffects) => ({
state,
@jamesplease
jamesplease / api.md
Last active May 17, 2019
Which custom hook + ref API do you prefer?
View api.md

A

The hook creates and returns the ref.

const { ref, ...otherStuff } = useCustomHook();

return <div ref={ref} />
@jamesplease
jamesplease / wrap-fn.js
Last active May 9, 2019
Which hook do you prefer?
View wrap-fn.js
// Regular usage
useThrottle(fn);
useWrapFn(fn, _.throttle);
// Passing options
useThrottle(fn, opts);
useWrapFn(fn, _.throttle, opts);
View use-mount-transition.js
import { useState, useEffect, useRef } from 'react';
import useIsMounted from './use-is-mounted';
const RENDER_TIMEOUT = 35;
export default function useMountTransition({
shouldBeMounted,
transitionDurationMs,
onEnteringTimeout = RENDER_TIMEOUT,
@jamesplease
jamesplease / 0.usage.js
Last active Apr 3, 2019
My favorite custom hook, useOnChange
View 0.usage.js
const [someState, setSomeState] = useState(true);
// It's just like componentDidUpdate!
useOnChange((current, prev) => {
console.log('It just changed!', current, prev);
}, someState);
// ...see the below files for the source.
View custom-hook.js
export function useCustomThing() {
// Assume this changes as the user interacts with the app
// (Note: this code sample doesn't show setState being called, but that
// part doesn't matter)
const [state, setState] = useState();
const stateRef = useRef(state);
useEffect(() => {
stateRef.current = state;
@jamesplease
jamesplease / react.js
Last active Mar 29, 2019
Defining a variable in JS vs React wit hooks
View react.js
// JavaScript
const thing = {};
// React wit hooks
import { useState, useRef, useEffect } from 'react';
const [thing, setThing] = useState();
const thingRef = useRef(thing);
useEffect(() => {
thingRef.current = thing;
@jamesplease
jamesplease / 0.usage.js
Last active Mar 12, 2019
A general-purpose fetch hook. This forms the foundation of the Standard Resource fetch hook.
View 0.usage.js
import useFetch from './use-fetch';
export default function book({ bookId }) {
const {
// wow so much stuff
fetching,
failed,
succeeded,
data,
res,
You can’t perform that action at this time.