Instantly share code, notes, and snippets.

View keybase.md

Keybase proof

I hereby claim:

  • I am ryardley on github.
  • I am ryardl (https://keybase.io/ryardl) on keybase.
  • I have a public key ASBYRGZRhFPvU4E3PXOXnk1w6KeFUwQNFax6Y_jPMfHVDwo

To claim this, I am signing this object:

View hooks-order-dont-do-this-example.jsx
let firstRender = true;
function RenderFunctionComponent() {
let initName;
if(firstRender){
[initName] = useState("Rudi");
firstRender = false;
}
const [firstName, setFirstName] = useState(initName);
View hooks-state-example.js
function RenderFunctionComponent() {
const [firstName, setFirstName] = useState("Rudi");
const [lastName, setLastName] = useState("Yardley");
return (
<Button onClick={() => setFirstName("Fred")}>Fred</Button>
);
}
View hooks-state-pseudocode.js
let state = [];
let setters = [];
let firstRun = true;
let cursor = 0;
function createSetter(cursor) {
return function setterWithCursor(newVal) {
state[cursor] = newVal;
};
}
View simple-render-prop.jsx
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>
View FriendListItem.jsx
import React from 'react';
import useFriendStatus from './useFriendStatus';
export default function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
View render-props-pyramid-doom.jsx
const Comments = ({ repoFullName }) => (
<Mutation mutation={DELETE_COMMENT}>
{(deleteComment) => (
<Query query={GET_CURRENT_USER}>
{({data: {currentUser}}) => (
<Subscription
subscription={COMMENTS_SUBSCRIPTION}
variables={{ repoFullName }}>
{({ data: { commentAdded }, loading }) => (
<div>
View withSubscription.jsx
// This function takes a component...
function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
View mixin-example.jsx
import React from 'react';
// numberBehaviour.js
const numberBehaviour = {
getInitialState() {
return {
newNumber: 1
}
},
setNewNumber(num) {
View hooks-example.jsx
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>