Skip to Content

Advanced React

Module Summary

This module expands learners’ foundational React knowledge by introducing advanced concepts necessary for building scalable, maintainable applications. Learners will explore React Hooks, including useState and useEffect, create custom hooks for reusable logic, manage global state with the Context API, and implement client-side routing using React Router. By the end of the module, learners will have the skills to manage both local and global state effectively and create dynamic, multi-page React applications.

Learning Objectives

By the end of this module, learners will be able to:

  • Use React Hooks (useState, useEffect) for state and effect management
  • Create and implement custom hooks for reusable logic
  • Manage global state using Context API
  • Implement routing in React applications using React Router
  • Build scalable and maintainable React applications

Learning Outcomes

Upon completing this module, learners will be able to:

  • Build complex React applications with proper state management
  • Create reusable logic through custom hooks
  • Implement global state management using Context API
  • Develop multi-page applications with dynamic routing
  • Apply advanced React patterns and best practices

Module Outline

Lesson 1: useState and useEffect

  • Time: 2 hours
  • Topics:
    • Deep dive into useState hook
    • Functional updates and state batching
    • Complex state management patterns
    • useEffect hook fundamentals
    • Cleanup functions and dependencies
    • Common useEffect patterns
  • Activities:
    • Build a complex form with multiple state dependencies
    • Implement a data fetching component with useEffect

Lesson 2: useEffect Patterns and Best Practices

  • Time: 3 hours
  • Topics:
    • Effect dependencies and the dependency array
    • Preventing infinite loops
    • Effect cleanup patterns
    • Handling async operations in useEffect
    • Common useEffect anti-patterns
  • Activities:
    • Implement a search component with debouncing
    • Create a subscription-based component

Lab 1: React Counter with useEffect

  • Time: 2 hours (asynchronous)
  • Overview: Build an advanced counter application that demonstrates complex state management and effect handling.
  • Objectives:
    • Implement multiple state dependencies
    • Use useEffect for side effects
    • Handle cleanup properly
    • Implement proper state updates
  • Activities:
    • Create a counter with history tracking
    • Implement auto-save functionality
    • Add keyboard event listeners
    • Build a reset mechanism

Lesson 3: Custom Hooks

  • Time: 2 hours
  • Topics:
    • What are custom hooks?
    • Rules of hooks
    • Creating reusable logic
    • Naming conventions
    • Testing custom hooks
  • Activities:
    • Create a useWindowSize custom hook
    • Build a useLocalStorage hook

Lesson 4: Advanced Custom Hooks

  • Time: 3.5 hours
  • Topics:
    • Composing multiple hooks
    • Handling async operations
    • Error handling in custom hooks
    • Performance optimization
    • Common custom hook patterns
  • Activities:
    • Build a useFetch hook
    • Create a useForm hook with validation

Lab 2: Custom Hooks Implementation

  • Time: 2 hours (asynchronous)
  • Overview: Create a set of custom hooks for a real-world application.
  • Objectives:
    • Implement reusable custom hooks
    • Handle async operations
    • Manage error states
    • Optimize performance
  • Activities:
    • Create a usePagination hook
    • Implement a useDebounce hook

Lesson 5: Context API

  • Time: 3.5 hours
  • Topics:
    • What is Context API?
    • Creating and using context
    • Context providers and consumers
    • When to use context
    • Performance considerations
  • Activities:
    • Implement a theme context
    • Create a user context

Lesson 6: Context Patterns

  • Time: 2 hours
  • Topics:
    • Multiple contexts
    • Context composition
    • Context with TypeScript
    • Context optimization
    • Common context patterns
  • Activities:
    • Build a multi-context application
    • Implement context with proper typing

Lab 3: Context API Implementation

  • Time: 2 hours (asynchronous)
  • Overview: Build a Todo application using Context API for state management.
  • Objectives:
    • Implement global state management
    • Create multiple contexts
    • Handle complex state updates
    • Optimize context performance
  • Activities:
    • Create a TodoContext
    • Implement a FilterContext
    • Build a ThemeContext
    • Add persistence layer

Lesson 7: React Router

  • Time: 2 hours
  • Topics:
    • Setting up React Router
    • Basic routing concepts
    • Route parameters
    • Navigation components
    • Route configuration
  • Activities:
    • Build a basic multi-page application
    • Implement route parameters

Lab 4: Dynamic Routing Implementation

  • Time: 1 hour
  • Overview: Build a blog application with dynamic routing and protected routes.
  • Objectives:
    • Implement dynamic routing
    • Create protected routes
    • Handle route parameters
    • Add route transitions
  • Activities:
    • Build a blog post system
    • Implement user authentication
    • Create an admin dashboard
    • Add route transitions

Final Assessments

Skills-Based Assessment (SBA)

  • Time: 3.5 hours (in class) + instructor discretion (outside of class)
  • Format: Practical project
  • Activity: Build a full-stack React application that demonstrates advanced state management, custom hooks, context API, and routing.
  • Deliverable: Submit the project via GitHub and provide a reflection on the implementation approach.

Knowledge-Based Assessment (KBA)

  • Time: 1.5 hours (asynchronous)
  • Format: 30 multiple-choice questions
  • Coverage: React Hooks, Custom Hooks, Context API, and React Router
  • Focus: Practical understanding of advanced React concepts through scenario-based questions and code snippets
Lesson 1: useState and useEffect