DennyScott

import styled from 'styled-components';

const Card = styled.div`
  box-sizing: border-box;
  max-width: 410px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;

DennyScott

import React, { useState } from "react"
...
function App(props) {
  const existingTokens = JSON.parse(localStorage.getItem("tokens"));
  const [authTokens, setAuthTokens] = useState(existingTokens);
  
  const setTokens = (data) => {
    localStorage.setItem("tokens", JSON.stringify(data));
    setAuthTokens(data);
  }

DennyScott

function Component(props) {
  useCallback(() => {
    fetch(props.url);
  }, [props]);
}

DennyScott

{
  name: "denny"
}

DennyScott

function Parent() {
  return(<ChildContainer name="Denny" />);
}

function Child({name}) {
  return(<div>{name}</div>);
}

const mapStateToProps = state => ({...});
const mapDispatchToProps = (dispatch, ownProps) => ({...});

DennyScott

import { fetchData } from './utils';

export function CatFacts({ id }) {
  const [data, setData] = useState();
  useEffect(() => {
   fetchData(id, setData)
  }, [id, setData]);

  return <div>Cat Fact: {data}</div>;

DennyScott

function App() {
  const [index, setIndex] = useState(0);
  const notMemoized = () => {
    console.log("Rendered no callback");
  };

  const memoized = useCallback(() => console.log("Rendered callback"), []);

  return (
    <div className="App">

DennyScott

export function CatFacts({ id }) {
  const [data, setData] = useState();
  useEffect(() => {
    const proxyUrl = "https://cors-anywhere.herokuapp.com/";
    const targetUrl = `https://cat-fact.herokuapp.com/facts/${id}`;
    fetch(proxyUrl + targetUrl)
      .then(response => response.json())
      .then(facts => {
        setData(facts.text);
      });

DennyScott

function ExampleComponent({url}) {
	const fetchData = useCallback(() => {
	  // fetch call here
	}, [url]);
	
  useEffect(() => fetchData(), [fetchData]);
  return (<div></div>);
}

DennyScott

function RefEq() {
  const A = () => { return 1 };
  const B = A;
  const C = () => { return 1 };
}

// A === B
// C !== A