Instantly share code, notes, and snippets.

In pursuit of happiness

Kent C. Dodds kentcdodds

View GitHub Profile
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
kentcdodds /
Last active Aug 6, 2018
Introduction to React

Hey friends 👋

My name is Kent C. Dodds and I'm a React dev and teacher. I'm going to be speaking at React Rally Conference next week and I'm also giving a workshop called Introduction to React. There are only a handful of early bird tickets left for this workshop and I want to let you know about it so you, your co-workers, and your new-hires can come along and join us.

You should come to this workshop if:

  • You are new to writing applications in JavaScript
  • You are experienced with writing applications in JavaScript, but newer to React
  • You are experienced with writing applications in React, but you have trouble explaining the difference between a React Element and a React Component
  • You are experienced with writing applications in React, but you have trouble explaining the difference between
    and React.createElement('div')
  • You have trouble writing a React application without Redux

This will log the currently active element as it changes. Really great for accessibility testing when you're trying to figure out what element has focus (so you can either prevent it from getting focus or make the fact that it has focus more visually obvious for example).