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

DennyScott

function eq() {
  let A = 'hi';
  let B = A;
  let A = 'bye'
}

// A === 'bye'
// B === 'hi'

DennyScott

function ValueEq() {
  let A = 'hello';
  const B = 'goodbye';
  const C = 'hello';
  A = 'hi';
}

// A === 'hi'
// B === 'goodbye'
// C === 'hello'