Skip to content

Instantly share code, notes, and snippets.

Avatar

Joey Gracey codeocelot

View GitHub Profile
View useWhy.js
import { useState } from 'react';
function useWhy(deps, id = null, logger = console.log) {
const [prevDeps, setPrevDeps] = useState(deps);
let changed = false;
deps.forEach((d, i) => {
if (d !== prevDeps[i]) {
changed = true;
logger(`Why ${id}: dep ${i} has changed from ${prevDeps[i]} to ${d}`);
}
View MyEnhancers.js
import { compose } from 'redux';
const ToUpper = (Component) => ({ text }) => <Component text={text.toUpper()} \>
const WithUnderscores = (Component) => ({ text }) => <Component text={text.split(' ').join('_')} />
export default compose(ToUpper, WithUnderscores);
// use like this
@codeocelot
codeocelot / git.sh
Last active Nov 9, 2017
Git monsters
View git.sh
# What the fuck just happened to this file?
git reflog -p --since=yesterday -- $file
# I forgot my branch name. What am I working on?
git for-each-ref --sort=-committerdate refs/heads --format='%(HEAD)%(color:yellow)%(refname:short)|%(color:bold green)%(committerdate:relative)|%(color:blue)%(subject)|%(color:magenta)%(authorname)%(color:reset)'|column -ts'|'
View App.js
import ReactDOM from 'react-dom';
import Post from './Post';
ReactDOM.render(
<Post postId="1" /> ,
document.getElementById('root')
)
View AsyncHoc-2.js
import React from 'react';
import PropTypes from 'prop-types';
const route = 'https://jsonplaceholder.typicode.com/posts';
class AsyncPostHoC extends React.Component{
constructor(props){
super(props);
this.state = {
isFetching: true,
View Post.js
import React from 'react';
import PropTypes from 'prop-types';
import AsyncPostHoC from '...';
const PostView = (props) => (
<div>
<p>{props.title}</p>
<p>{props.body}</p>
</div>
);
View AsyncHoc-1.js
import React from 'react';
import PropTypes from 'prop-types';
const route = 'https://jsonplaceholder.typicode.com/posts';
class AsyncPostHoC extends React.Component{
constructor(props){
super(props);
this.state = {};
}
@codeocelot
codeocelot / UppercaseHoC-stateful.js
Last active Nov 9, 2017
HoC example using vanilla React component notation
View UppercaseHoC-stateful.js
const UppercaseHoC = (WrappedComponent) => class extends React.Component{
render(){
return(
<div style="text-transform: uppercase;">
<WrappedComponent {...this.props} />
</div>
)
}
}
@codeocelot
codeocelot / UppercaseHoC.js
Last active Apr 29, 2017
Higher Order Component to uppercase text
View UppercaseHoC.js
const UppercaseHoC = (WrappedComponent) => (props) =>
<div style="text-transform: uppercase;">
<WrappedComponent {...props}/>
</div>
View context-lifecycle-arguments.js
componentWillReceiveProps( nextProps, nextContext)
shouldComponentUpdate(nextProps,nextState,nextContext)
componentWillUpdate(nextProps,nextState,nextContext)
componentDidUpdate(prevProps,prevState,prevContext)