Skip to content

Instantly share code, notes, and snippets.

🍕
please

James jamesplease

🍕
please
Block or report user

Report or block jamesplease

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
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,
View weird-damp.js
if (changeInY > 0 && restraints.down !== null) {
const dampFactor =
1 -
linearScale({
domain: [0, restraints.down * 2],
range: [0, 0.5],
value: changeInY,
});
let dampedChangeInY = changeInY * dampFactor;
View 0.notes.md

TypeScript Notes

  • Use Pick to create ResourcePointers
  • Use a Record to create the final Store (maybe?)
  • Use the ResourceDefinition["idAttribute"] syntax to access the actual value of the ID
You can’t perform that action at this time.