update context and hook reducer exercises

Author: alexlobera

src/components/patterns/Context/Page.jsx

@@ -22,21 +22,32 @@ const Page = () => (
  <Example />
  <hr />
  <Exercise />
- <h3>Bonus Exercise</h3>
- <p>
- <input type="checkbox" />
- b.1. In{" "}
- <code>
- src/components/patterns/Context/exercise/GraphQLProvider.jsx
- </code>{" "}
- we are using <code>const memoizedHashGql = memoize(hashGql);</code>.
- Should we use useMemo instead? Why?
- </p>
+
+ <h3>Bonus Exercise 1</h3>
+ <p>Now that you know how the React Context works:</p>
+ <ul>
+ <li>
+ <input type="checkbox" /> Would use the React Context for the form in
+ the previous React Reducer Exercise? What are the pros and cons?
+ </li>
+ <li>
+ <input type="checkbox" /> If you use the Context for the form, would you
+ pass the value of the field and other props to the Field component using
+ context or props?
+ </li>
+ <li>
+ <input type="checkbox" /> If you pass the value of the "input" and the
+ other required props to the Field component using context, does it still
+ make sense to use the React.memo HoC in the Field component?
+ </li>
+ </ul>
+
+ <h3>Bonus Exercise 2</h3>
  <p>
- <input type="checkbox" />
- b.2. In our current implementation, although there is a cache (data key in
- our reducer) for each pair query & variables, we can only send 1 query at
- a time. How would you make it possible to send requests concurrently?
+ <input type="checkbox" /> In our current implementation, although there is
+ a cache (data key in our reducer) for each pair query & variables, we can
+ only send 1 query at a time. How would you make it possible to send
+ requests concurrently?
  </p>
  </React.Fragment>
 );

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

@@ -64,7 +64,7 @@ const Root = () => {
  your useQuery. You can create a handy useClient custom hook like we did
  in the example{" "}
  <code>
- src/components/patterns/Context/example/modal.jsx -> useModal function{" "}
+ src/components/patterns/Context/example/modal.jsx : useModal function{" "}
  </code>
  </p>
 
@@ -97,6 +97,15 @@ const Root = () => {
  wait 🤔... does it make any difference in our use case? Why? Discuss
  with your peers.
  </p>
+ <h4>Tasks part 3:</h4>
+ <p>
+ <input type="checkbox" /> 3. In{" "}
+ <code>
+ src/components/patterns/Context/exercise/GraphQLProvider.jsx
+ </code>{" "}
+ we are using <code>const memoizedHashGql = memoize(hashGql);</code>.
+ Should we use useMemo instead? Why?
+ </p>
  </div>
  );
 };

src/components/patterns/HookReducer/Page.jsx

@@ -88,7 +88,51 @@ const Page = () => (
  </li>
  </ul>
 
- <h3>Bonus exercise</h3>
+ <h3>Exercise part 3</h3>
+ <p>
+ By default we are displaying the error message to the user even if the
+ user did not use the form. That's not a great user experience. To improve
+ that we are going to add another state in our form to identify which
+ fields are `dirty`.
+ </p>
+ <p>
+ A field is dirty when the value of the field is not equal to the initial
+ value, false if the values are equal.
+ </p>
+
+ <h3>Bonus exercise part 1</h3>
+ <p>
+ We are going to add some state to our form to know when the form is being
+ submitted.
+ </p>
+ <p>
+ If the form is being submitted then we'll display the text "submitting"
+ instead of "submit" in the submit button.
+ </p>
+
+ <h3>Bonus exercise part 2</h3>
+ <p>
+ Use the{" "}
+ <a
+ href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.htm"
+ target="_blank"
+ >
+ React Profiler
+ </a>{" "}
+ in the React Dev Tools to record what happens when you type in the user
+ id. Is the password being rendered as well? Why?
+ </p>
+ <p>
+ To avoid unnecessary renders you can create another component called
+ "Field" and use{" "}
+ <a
+ href="https://reactjs.org/docs/react-api.html#reactmemo"
+ target="_blank"
+ >
+ React.memo
+ </a>
+ .
+ </p>
  </React.Fragment>
 );