Skip to content

Instantly share code, notes, and snippets.


James jamesplease

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
jamesplease /
Last active May 17, 2019
Which custom hook + ref API do you prefer?


The hook creates and returns the ref.

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

return <div ref={ref} />
jamesplease / wrap-fn.js
Last active May 9, 2019
Which hook do you prefer?
View wrap-fn.js
// Regular usage
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({
onEnteringTimeout = RENDER_TIMEOUT,
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 / 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 / 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
View weird-damp.js
if (changeInY > 0 && restraints.down !== null) {
const dampFactor =
1 -
domain: [0, restraints.down * 2],
range: [0, 0.5],
value: changeInY,
let dampedChangeInY = changeInY * dampFactor;

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
View react-question.js
setState({ value: false });
setState({ value: true });
// After React updates the state, what will `value` be?
// In other words, if you follow the above code with something like...
setTimeout(() => {
setState(prevState => {
console.log('The value is', prevState.value);
You can’t perform that action at this time.