add custom hooks files

Author: alexlobera

src/components/RGALogo.jsx

@@ -0,0 +1,19 @@
+let me = {
+ name: "Alex Lobera",
+ loves: [
+ "JavaScript",
+ "React",
+ "GraphQL",
+ "Testing",
+ "Serverless",
+ "UX",
+ "startups",
+ "salsa",
+ "bachata",
+ "my girlfriend",
+ //Not in this particular order!
+ ],
+ company: "https://reactgraphql.academy",
+ title: "Developer, coach, and decision-maker",
+ twitter: "@alex_lobera",
+};

src/components/functional-programming/closure/alex.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Example from "./example";
+import Exercise from "./exercise";
+
+const Page = () => (
+ <div>
+ <h2>Custom Hooks</h2>
+ <Example />
+ <Exercise />
+ </div>
+);
+
+export default Page;

src/components/patterns/CustomHooks/Page.jsx

@@ -0,0 +1,71 @@
+import React, { useMemo, useCallback, useEffect } from "react";
+import { useIncrement } from "./index";
+
+const computeExpensiveValue = (a, b) => {
+ console.log("[custom hooks exercise] computing expensive value");
+
+ return a * b;
+};
+
+const UseCallbackOrMemo = ({ a = 1, b = 2 }) => {
+ const { count, increment } = useIncrement();
+ // useMemo returns a value
+ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
+ // useCallback returns a function
+ const memoizedCallback = useCallback(increment, []);
+
+ useEffect(() => {
+ memoizedCallback();
+ // 👩‍🏫 increment instead of memoizedCallback and you'll get an infinite loop
+ // increment();
+ }, [memoizedCallback]);
+
+ /*
+ 👩‍🏫 Do:
+ - Go to http://localhost:3000/custom-hooks
+ - Open the console on the dev tools
+ - Click on the "Increment 🍄" button
+ - You should only see one "[custom hooks exercise] computing expensive value"
+ */
+
+ return (
+ <React.Fragment>
+ <h3>🥑 Before the exercise 🏋️‍♀️</h3>
+ <h4>useMemo</h4>
+ <blockquote>
+ Returns a memoized <strong>value</strong>.
+ <a
+ href="https://reactjs.org/docs/hooks-reference.html#usememo"
+ target="_blank"
+ >
+ {` `} The docs
+ </a>
+ </blockquote>
+ <h4>useCallback</h4>
+ <blockquote>
+ Returns a memoized <strong>callback</strong> (function).
+ <a
+ href="https://reactjs.org/docs/hooks-reference.html#usecallback"
+ target="_blank"
+ >
+ {` `} The docs
+ </a>
+ </blockquote>
+ <p>Last render on {new Date().toString()}</p>
+ <p>
+ memoized value: {memoizedValue}
+ <br />
+ <em>
+ If you look at the console, you should not see "[custom hooks
+ exercise] computing expensive value" on every render
+ </em>
+ </p>
+ <p>
+ <button onClick={() => increment(memoizedValue)}>Increment 🍄</button>
+ current count: {count}
+ </p>
+ </React.Fragment>
+ );
+};
+
+export default UseCallbackOrMemo;

src/components/patterns/CustomHooks/example/UseCallbackOrMemo.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import UseCallbackOrMemo from "./UseCallbackOrMemo";
+
+// const calculateValue = (a, b) => a + b;
+
+// export const useIncrement = (initialValue, calculateValue) => {
+export const useIncrement = (initialValue) => {
+ const [count, setCount] = useState(initialValue || 0);
+ // 👩‍🏫 the value of the increment could be resolved by a function that is passed to the useIncrement (e.g. inversion of control)
+ // const increment = (value = 1) => setCount(calculateValue(count, value));
+ const increment = (value = 1) => setCount(count + value);
+
+ return { count, increment };
+};
+
+// Using a custom hook
+// const ExampleComponent = (props) => {
+// const { count, increment } = useIncrement(props.initialValue);
+
+// return (
+// <p>
+// <button onClick={() => increment()}>Increment</button>
+// current count: {count}
+// </p>
+// );
+// };
+
+const ExampleComponent = (props) => {
+ const { count, increment } = useIncrement(props.initialValue);
+
+ return (
+ <p>
+ <button onClick={() => increment()}>Increment</button>
+ Current count: {count}
+ </p>
+ );
+};
+
+const Example = () => (
+ <React.Fragment>
+ <h3>👩‍🏫 Example</h3>
+ <p>
+ A React Hook is a function that lets us reuse component logic across
+ different function components. Component logic is:
+ </p>
+ <ul>
+ <li>State</li>
+ <li>Lifecyle</li>
+ <li>Context</li>
+ </ul>
+ <p>A custom Hook is a function that calls another Hook</p>
+
+ <p>
+ Custom Hooks documentation{" "}
+ <a href="https://reactjs.org/docs/hooks-custom.html" target="_blank">
+ https://reactjs.org/docs/hooks-custom.html
+ </a>
+ </p>
+ <ExampleComponent initialValue={5} />
+ <hr />
+ <UseCallbackOrMemo />
+ </React.Fragment>
+);
+
+export default Example;

src/components/patterns/CustomHooks/example/index.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+// import useWidth, { LARGE, MEDIUM } from "./useWidth";
+// remove the following import after refactoring the Width component to a custom hook
+import Width from "./useWidth";
+
+const Bonus = () => {
+ return (
+ <React.Fragment>
+ <hr />
+ <h3>🏋️‍♀️Exercise</h3>
+ <h4>
+ 🎯 The goal is to extract some component logic into a reusable function
+ avoiding pitfalls
+ </h4>
+
+ <h1>
+ {/* Comment out the following <Width /> after implementing part 1 */}
+ The width is: <Width />
+ {/* Use the width value from your custom hook in the next line after you implment part 1 */}
+ {/* {width} */}
+ </h1>
+
+ <h4>Part 1, refactoring</h4>
+
+ <p>
+ <input type="checkbox" /> 1. Refactor the{" "}
+ <code>src/components/patterns/CustomHooks/exercise/useWidth.jsx</code>{" "}
+ class to a function component using the <code>useState</code> and{" "}
+ <code>useEffect</code> Hooks.
+ </p>
+ <p>
+ Tip: to remove the event listeners we need to use the{" "}
+ <a
+ href="https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup"
+ target="_blank"
+ >
+ {" "}
+ cleanup phase
+ </a>{" "}
+ of the effect. To clean up the side effects you must return a function.
+ </p>
+ <p>
+ You'll know it works because the "The width is: X" will change properly
+ when you resize the screen.
+ </p>
+ <h4>Part 2, reusing</h4>
+ <p>
+ <input type="checkbox" /> 2.1. Import your
+ src/components/patterns/CustomHooks/exercise/useWidth.js custom hook in{" "}
+ <code>src/components/patterns/CustomHooks/exercise/index.jsx</code> and
+ replace the &lt;Width /&gt; component using:
+ <code>const width = useWidth()</code>
+ </p>
+ <p>
+ You'll know it works because the "The width is: X" will change properly
+ when you resize the screen. 🤔wait... then (discuss with your peer in
+ the group):
+ </p>
+ <p>
+ <input type="checkbox" /> 2.2. What's the difference between &lt;Width
+ /&gt; and useWidth if I can also do{" "}
+ <code>import Width from "./useWidth"</code> and do &lt;Width /&gt;?
+ </p>
+ <h4>Part 3, pitfalls</h4>
+ <p>
+ <input type="checkbox" /> 3.1. We have dissabled the{" "}
+ <a
+ href="https://github.com/facebook/react/issues/14920"
+ target="_blank"
+ >
+ 'exhaustive-deps' lint rule
+ </a>
+ , and you might have a memory leak in your <code>useWidth</code>. Your
+ task is to identify it and fix it using useMemo or useCallback (you'll
+ have to decide). Notice, you might be following good practices and
+ already fixed the problem without realizing it. Double check with your
+ peers in your group.
+ </p>
+ <p>
+ ⚠️ Warning, you should use eslint to help you identify potential bugs.
+ It's not enable in this exercise to help you understand the problem.
+ </p>
+
+ <h4>🤸‍♀️Bonus exercise, legacy</h4>
+ <p>
+ <input type="checkbox" /> Bonus 1. Replace the HoC{" "}
+ <code>withWidth</code> in
+ <code>
+ src/components/patterns/CompoundComponents/exercise/Menu.jsx
+ </code>{" "}
+ with your custom hook <code>useWidth</code>.
+ </p>
+
+ <p>
+ <input type="checkbox" /> Bonus 2. We want to replace the HoC{" "}
+ <code>withWidth</code> in
+ <code>src/components/App.jsx</code> with your custom hook but we don't
+ have much time and confidence (ohh no tests!). Create a HoC that uses
+ the useWidth hook and injects the width value via props to the App
+ component.
+ </p>
+ </React.Fragment>
+ );
+};
+
+export default Bonus;

src/components/patterns/CustomHooks/exercise/index.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+export const SMALL = 1;
+export const MEDIUM = 2;
+export const LARGE = 3;
+
+const largeWidth = 992,
+ mediumWidth = 768;
+
+class WithWidth extends React.Component {
+ constructor() {
+ super();
+ this.state = { width: this.windowWidth() };
+ }
+
+ componentDidMount() {
+ if (typeof window !== "undefined") {
+ window.addEventListener("resize", this.handleResize);
+ this.handleResize();
+ }
+ }
+
+ componentWillUnmount() {
+ if (typeof window !== "undefined")
+ window.removeEventListener("resize", this.handleResize);
+ }
+
+ handleResize = () => {
+ let width = this.windowWidth();
+ if (width !== this.state.width) this.setState({ width });
+ };
+
+ windowWidth() {
+ let innerWidth = 0;
+ let width;
+ if (window) innerWidth = window.innerWidth;
+
+ if (innerWidth >= largeWidth) {
+ width = LARGE;
+ } else if (innerWidth >= mediumWidth) {
+ width = MEDIUM;
+ } else {
+ // innerWidth < 768
+ width = SMALL;
+ }
+
+ return width;
+ }
+
+ render() {
+ return this.state.width;
+ }
+}
+
+export default WithWidth;

src/components/patterns/CustomHooks/exercise/useWidth.js

@@ -0,0 +1,4 @@
+import withWidth from "./withWidth";
+export { LARGE, MEDIUM, SMALL } from "./withWidth";
+
+export default withWidth({ largeWidth: 1000 });