Skip to content

Instantly share code, notes, and snippets.

In pursuit of happiness

Kent C. Dodds kentcdodds

View GitHub Profile
kentcdodds / control-props.js
Last active Apr 2, 2019
A simpler implementation of control props
View control-props.js
// control props
import React from 'react'
import {Switch} from '../switch'
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))
const noop = () => {}
function toggleReducer(state, {type, initialState}) {
switch (type) {
case useToggle.types.toggle: {
kentcdodds / control-props.js
Created Apr 2, 2019
An implementation of control props with hooks
View control-props.js
// control props
import React from 'react'
import _ from 'lodash'
import {Switch} from '../switch'
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))
const noop = () => {}
function toggleReducer(state, {type, initialState}) {
View button.js
import 'pp-vx/dist/components/button/button.css'
import React from 'react'
import clsx from 'clsx'
const sizes: {[key: string]: string} = {
md: 'vx_btn--size_md',
sm: 'vx_btn--size_sm',
export type OneOrAnother<T1, T2> =
kentcdodds / break-on-access.js
Created Jan 8, 2019
My Chrome DevTools snippets
View break-on-access.js
function breakOn(obj, propertyName, mode, func) {
// this is directly from
function getPropertyDescriptor(obj, name) {
var property = Object.getOwnPropertyDescriptor(obj, name);
var proto = Object.getPrototypeOf(obj);
while (property === undefined && proto !== null) {
property = Object.getOwnPropertyDescriptor(proto, name);
proto = Object.getPrototypeOf(proto);
kentcdodds / use-deep-compare-effect.js
Created Nov 9, 2018
a custom react hook that I want feedback on because it feels like a lot of work and maybe I'm missing something...
View use-deep-compare-effect.js
// Feedback requested on the useDeepCompareEffect
// it just feels like a bit of work...
// when people use the useQuery hook, they'll typically
// do so like this: `useQuery(myQuery, {var1: props.value})`
// which means that passing `variables` to `useEffect` will
// trigger a rerun of the callback even if they didn't
// actually change (referrential equality)
function useQuery({query, variables}) {
View github-query.graphql
query getUserData($username: String!) {
user(login: $username) {
followers {
following {
View fetch-pokemon.js
// NOTE: you will NOT write code like this when using suspense
// instead, you'll use react-cache (not yet officially published)
// it'll handle things like pre-loading, handling rapid re-renders, etc.
const cache = {}
function FetchPokemon({pokemonName}) {
const pokemon = cache[pokemonName]
if (!pokemon) {
const promise = fetchPokemon(pokemonName).then(
View raw-text-example.js
* In our app, we have a few middleware that generate a string of HTML.
* On occassion it's fine to just use dangerouslySetInnerHTML directly for
* those, but that requires that you have a host node for the innerHTML.
* In certain scenarios (like tags in <head />), there's HTML that we need
* to insert directly where it is. This component enables that because
* we replace <raw-text> and </raw-text> with empty strings. Effectively
* making whatever's between <raw-text> and </raw-text> inlined in place.
kentcdodds / provider-pattern.js
Last active Sep 18, 2018
A Render Prop by Any Other Name: React
View provider-pattern.js
const {Provider, Consumer: ThemeConsumer} = React.createContext()
class ThemeProvider extends React.Component {
setTheme = theme => this.setState({theme})
state = {theme: 'dark', setTheme: this.setTheme}
render() {
return <Provider value={this.state} {...this.props} />
View array-methods.js
// .filter(Boolean)
// .fitler to unique values
const fruit = ['Apple', 'Banana', 'Apple', 'Orange']
console.log(Array.from(new Set(fruit)))
const unique = (element, index, fullArray) => fullArray.indexOf(element) === index
You can’t perform that action at this time.