Finish Video

Author: WebDevSimplified

package-lock.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

package.json

@@ -0,0 +1,11 @@
+import useScript from "./useScript"
+
+export default function ScriptComponent() {
+  const { loading, error } = useScript(
+    "https://code.jquery.com/jquery-3.6.0.min.js"
+  )
+
+  if (loading) return <div>Loading</div>
+  if (error) return <div>Error</div>
+  return <div>{window.$(window).width()}</div>
+}

src/11-useScript/ScriptComponent.js

@@ -0,0 +1,15 @@
+import useAsync from "../9-useAsync/useAsync"
+
+export default function useScript(url) {
+  return useAsync(() => {
+    const script = document.createElement("script")
+    script.src = url
+    script.async = true
+
+    return new Promise((resolve, reject) => {
+      script.addEventListener("load", resolve)
+      script.addEventListener("error", reject)
+      document.body.appendChild(script)
+    })
+  }, [url])
+}

src/11-useScript/useScript.js

@@ -0,0 +1,40 @@
+import { useEffect, useState, useRef } from "react"
+import useDeepCompareEffect from "./useDeepCompareEffect"
+
+export default function DeepCompareEffectComponent() {
+  const [age, setAge] = useState(0)
+  const [otherCount, setOtherCount] = useState(0)
+  const useEffectCountRef = useRef()
+  const useDeepCompareEffectCountRef = useRef()
+
+  const person = { age: age, name: "Kyle" }
+
+  useEffect(() => {
+    useEffectCountRef.current.textContent =
+      parseInt(useEffectCountRef.current.textContent) + 1
+  }, [person])
+
+  useDeepCompareEffect(() => {
+    useDeepCompareEffectCountRef.current.textContent =
+      parseInt(useDeepCompareEffectCountRef.current.textContent) + 1
+  }, [person])
+
+  return (
+    <div>
+      <div>
+        useEffect: <span ref={useEffectCountRef}>0</span>
+      </div>
+      <div>
+        useDeepCompareEffect: <span ref={useDeepCompareEffectCountRef}>0</span>
+      </div>
+      <div>Other Count: {otherCount}</div>
+      <div>{JSON.stringify(person)}</div>
+      <button onClick={() => setAge(currentAge => currentAge + 1)}>
+        Increment Age
+      </button>
+      <button onClick={() => setOtherCount(count => count + 1)}>
+        Increment Other Count
+      </button>
+    </div>
+  )
+}

src/12-useDeepCompareEffect/DeepCompareEffectComponent.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from "react"
+import isEqual from "lodash/fp/isEqual"
+
+export default function useDeepCompareEffect(callback, dependencies) {
+  const currentDependenciesRef = useRef()
+
+  if (!isEqual(currentDependenciesRef.current, dependencies)) {
+    currentDependenciesRef.current = dependencies
+  }
+
+  useEffect(callback, [currentDependenciesRef.current])
+}

src/12-useDeepCompareEffect/useDeepCompareEffect.js

@@ -0,0 +1,11 @@
+import { useState } from "react"
+import useEventListener from "./useEventListener"
+
+export default function EventListenerComponent() {
+  const [key, setKey] = useState("")
+  useEventListener("keydown", e => {
+    setKey(e.key)
+  })
+
+  return <div>Last Key: {key}</div>
+}

src/13-useEventListener/EventListenerComponent.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react"
+
+export default function useEventListener(
+  eventType,
+  callback,
+  element = window
+) {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    const handler = e => callbackRef.current(e)
+    element.addEventListener(eventType, handler)
+
+    return () => element.removeEventListener(eventType, handler)
+  }, [eventType, element])
+}

src/13-useEventListener/useEventListener.js

@@ -0,0 +1,100 @@
+import { useRef } from "react"
+import useOnScreen from "./useOnScreen"
+
+export default function OnScreenComponentComponent() {
+  const headerTwoRef = useRef()
+  const visible = useOnScreen(headerTwoRef, "-100px")
+
+  return (
+    <div>
+      <h1>Header</h1>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt,
+        nam id itaque error dicta? Numquam earum iusto optio officia, molestias
+        debitis illum facilis nemo asperiores eaque voluptates modi? Dicta
+        mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt
+        animi architecto dignissimos amet in quam praesentium corrupti voluptate
+        dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque
+        illum tempora enim dolores eum quis itaque nostrum architecto vel cum
+        officiis aperiam qui exercitationem voluptatibus. Veritatis unde
+        doloribus dolorem architecto, eum reprehenderit possimus similique eius
+        cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis
+        assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae
+        architecto, unde consequuntur velit consequatur dicta mollitia, fuga
+        iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci
+        nostrum perferendis ad rerum accusamus distinctio repellendus eius,
+        quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae
+        laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur,
+        commodi iure illum soluta delectus, architecto ratione maiores
+        accusamus. Provident quia sequi dolorum asperiores necessitatibus
+        consequatur perspiciatis at a, inventore, deserunt corporis recusandae
+        earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam
+        exercitationem ipsam libero quidem minima dolores perferendis eveniet
+        impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam
+        veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio
+        nulla minima libero sed doloremque soluta, dignissimos tempora rerum id
+        nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit
+        dignissimos voluptatibus cumque nobis iste asperiores illum fugit
+      </div>
+      <h1 ref={headerTwoRef}>Header 2 {visible && "(Visible)"}</h1>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt,
+        nam id itaque error dicta? Numquam earum iusto optio officia, molestias
+        debitis illum facilis nemo asperiores eaque voluptates modi? Dicta
+        mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt
+        animi architecto dignissimos amet in quam praesentium corrupti voluptate
+        dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque
+        illum tempora enim dolores eum quis itaque nostrum architecto vel cum
+        officiis aperiam qui exercitationem voluptatibus. Veritatis unde
+        doloribus dolorem architecto, eum reprehenderit possimus similique eius
+        cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis
+        assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae
+        architecto, unde consequuntur velit consequatur dicta mollitia, fuga
+        iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci
+        nostrum perferendis ad rerum accusamus distinctio repellendus eius,
+        quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae
+        laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur,
+        commodi iure illum soluta delectus, architecto ratione maiores
+        accusamus. Provident quia sequi dolorum asperiores necessitatibus
+        consequatur perspiciatis at a, inventore, deserunt corporis recusandae
+        earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam
+        exercitationem ipsam libero quidem minima dolores perferendis eveniet
+        impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam
+        veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio
+        nulla minima libero sed doloremque soluta, dignissimos tempora rerum id
+        nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit
+        dignissimos voluptatibus cumque nobis iste asperiores illum fugit
+        veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere
+        sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis
+        quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi
+        voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore
+        perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur
+        maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque
+        iste velit. Amet similique accusamus doloribus expedita modi a
+        architecto accusantium labore unde non, dolore totam quaerat sit
+        laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis
+        repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores
+        eveniet nulla exercitationem natus delectus est minus a architecto
+        pariatur molestias quo nihil maxime quasi facere magnam neque dolorem
+        ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur.
+        Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum
+        exercitationem reprehenderit laborum eligendi cumque? Quia porro modi
+        repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat
+        ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe
+        ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit!
+        Sapiente nesciunt consequatur labore iste quas possimus rem cumque,
+        fugit laborum repellendus nisi adipisci officia temporibus quaerat!
+        Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum
+        impedit non aut modi iste? Placeat illo quisquam assumenda esse cum
+        ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem
+        molestias exercitationem ullam eum amet tempore dolor aliquid unde
+        deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum
+        expedita consequatur aliquid consequuntur saepe esse necessitatibus
+        repudiandae, natus, officia enim odit rem nobis adipisci, voluptates
+        autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam
+        commodi, quidem, dolorem error eum animi, id nam? Corporis, non
+        adipisci!
+      </div>
+    </div>
+  )
+}

src/14-useOnScreen/OnScreenComponent.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react"
+
+export default function useOnScreen(ref, rootMargin = "0px") {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    console.log(ref.current)
+    if (ref.current == null) return
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { rootMargin }
+    )
+    observer.observe(ref.current)
+    return () => {
+      if (ref.current == null) return
+      observer.unobserve(ref.current)
+    }
+  }, [ref.current, rootMargin])
+
+  return isVisible
+}