Magellan Midstream Session 3 Agenda

[coryhouse]

Review

• Discuss how hooks work and rules of hooks

Complete Demo app checklist

• Async / await
• Error handling
• Lifting State
• Persist state to localStorage (can mix with useLocalStorage hook)
• Implement user role dropdown that uses reusable select
• Implement page layout
• Handle fast duplicate delete user clicks
• Implement State machine for manageUsers page
• Use promise.race to timeout a long-running API call
• Implement login and redirect if user isn't authenticated
• Lazy load routes and display spinner via Suspense

Modern Redux and best practices

• Compare Redux branch to master
• Hooks
• Centralize state declaration

Reusable React Components

• Slides
• Add Storybook to project and document
• Implement a reusable card component that accepts children
• Export enum from button component that specifies the different types / sizes
• Styling approaches
• Create table component that implements as many potential states (outlined in checklist) as possible
• Publish a reusable component to npm

Advanced React

• Context
  • Create context branch that centralizes data. Compare with Redux
  • Use context to with best practices - Implement alert system
• useReducer - Convert master to use this
• useCallback - Extract useEffect logic to a function to show in action
• useRef - Check isMounted to cancel async calls on unmounted components. Set focus on page load using imperative call.
• Custom Hooks - See options in advanced
• Compound Components - Implement 3 approaches and contrast

Securing Apps with Auth0