Skip to content

Instantly share code, notes, and snippets.

💙
In pursuit of happiness

Kent C. Dodds kentcdodds

💙
In pursuit of happiness
Block or report user

Report or block kentcdodds

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
@kentcdodds
kentcdodds / create-reducer-context.js
Created May 8, 2019
Just some fun idea I had and don't want to lose.
View create-reducer-context.js
// src/count-context.js
import React from 'react'
function countReducer(count, action) {
const {step = 1} = action
switch (action.type) {
case 'INCREMENT': {
return count + step
}
default: {
@kentcdodds
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
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
kentcdodds / break-on-access.js
Created Jan 8, 2019
My Chrome DevTools snippets
View break-on-access.js
// https://github.com/paulirish/break-on-access/blob/master/break-on-access.js
function breakOn(obj, propertyName, mode, func) {
// this is directly from https://github.com/paulmillr/es6-shim
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
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...
// HERE'S THE REASON I NEED THIS:
// 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) {
name
login
avatarUrl
followers {
totalCount
}
following {
totalCount
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
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} />
}
}
You can’t perform that action at this time.