gragland

import React, { useState, useEffect, useRef } from 'react';

// Usage
function MyComponent({ obj }) {
  const [state, setState] = useState();
  
  // We want the previous obj if obj.id is the same as the new obj.id
  // We pass a custom equality function as the second arg to our hook.
  const theObj = useMemoCompare(obj, prev => prev && prev.id === obj.id);
  

gragland

  
  const signinAnonymously = () => {
    return firebase.auth().signInAnonymously()
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };
  
  etc...

gragland

import React, { useState, useEffect, useCallback } from 'react';

// Usage
function App() {
  const { execute, pending, value, error } = useAsync(myFunction, false);

  return (
    <div>
      {value && <div>{value}</div>}
      {error && <div>{error}</div>}

gragland

import Dashboard from "./Dashboard.js";
import Loading from "./Loading.js";
import { useRequireAuth } from "./use-require-auth.js";

function DashboardPage(props) {
  const auth = useRequireAuth();
  
  // If auth is null (still fetching data) 
  // or false (logged out, above hook will redirect)
  // then show loading indicator.

gragland

import { useParams, useLocation, useHistory, useRouteMatch } from 'react-router-dom';
import queryString from 'query-string';

// Usage
function MyComponent(){
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)
  console.log(router.query.postId);

gragland

import React, { useState, useEffect, useContext, createContext } from "react";
import Auth0 from "auth0-js";

/*
    SETUP INSTRUCTIONS:
    - Create a new Auth0 application and choose type "Single Page Web Applications"
    - Go to your news app's setting and add the domain and clientId to the code below
      where it says "Replace me".
    - In your new apps settings scroll to the bottom, click "Show Advanced Settings",
      go to the "Grant Types" tab, check the "Password" option, then click save.

gragland

// Top level App component
import React from "react";
import { ProvideAuth } from "./use-auth.js";

function App(props) {
  return (
    <ProvideAuth>
      {/* 
        Route components here, depending on how your app is structured.
        If using Next.js this would be /pages/_app.js

gragland

import Router from 'next/router';
import Analytics from 'analytics';
import googleAnalyticsPlugin from 'analytics-plugin-ga';

const analytics = Analytics({
  debug: process.env.NODE_ENV !== 'production',
  plugins: [
    googleAnalyticsPlugin({
      trackingId: process.env.GA_TRACKING_ID
    })

gragland

import { useState, useCallback, useRef } from "react";

// Usage
function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? '😁' : '☹️'}
    </div>

gragland

import { useState, useRef, useEffect, useCallback } from 'react';

// Usage
function App(){
  // State for storing mouse coordinates
  const [coords, setCoords] = useState({ x: 0, y: 0 });
  
  // Event handler utilizing useCallback ...
  // ... so that reference never changes.
  const handler = useCallback(