7^th Practical Class:
Context, More Hooks, Debugging, and GraphQL Fragments

• React Context
• Some More Hooks
• Debugging
• GraphQL Fragments
• Fragments with Apollo Client

React Context

Props Drilling

React Context and useContext Hook

Nested Context Providers

useContext Without Context Provider

Create Context:

• Context documentation
• useContext documentation

Provide Context Value:

Get Context Value:

Who is Using Context?

• libraries:

  • Apollo Client (useQuery, useMutation, ...)
  • Formik (useField, Field, Form, ...)
  • React Router

• Quacker / Team Projects

  • see frontend/src/utils/auth.js

  • usage:

👌 Please read: How to use React Context effectively 👌

Some More Hooks

• useMemo, useCallback
• Custom Hooks
• useRef (focus)
• useReducer - link

useMemo, useCallback

• useMemo: "value memoization"
• useCallback: "function/callback memoization"

Whithout Memoization:

With Memoization:

Custom Hooks

• see Building Your Own Hooks
• use use* prefix!

useRef

• useRef documentation

useReducer

• "more powerfull useState"
• see How to use React Context effectively
• useReducer documentation
• good candidate for Pomodoro timers

Debugging

• console.log()
  • use: console.log("something:", value1, value2)
• debugger
  • debugger documentation
• JavaScript Source Maps
• Chrome extensions:
  • React Developer Tools
  • Apollo Client Developer Tools

GraphQL Fragments

• With fragments:

Fragments with Apollo Client

• Apollo Fragments documentation

organisms/QuackList.js

pages/HomePage.js: