Advanced React

Last modified: 2024-02-27

Audience

Developers

Duration

2 Days

Description

Once you know the basics of React, you are now ready to master the next level. We cover all the arcane topics, including: architectural patterns of React, custom hooks, render props, higher order components, performance optimization, shared context, lazy loading, reducer pattern, React Server Components, Suspense loader, Next.js, Remix, security and much more.

We even use advanced components, like charts and maps.

Course Outline

Context

  • Property drilling
  • Why use a context?
  • Creating context using createContext()
  • Using providers
  • Consuming context with hooks
  • Updating Context

Effects and useEffect()

  • Sync external systems with Effects
  • Make your component renders pure
  • Cleanup functions
  • Effects LifeCycle

React Architecture Patterns

  • Separation of concerns in Components
  • Higher-Order Components
  • Render Props
  • Custom Hooks
  • Reusing Components

Reducer pattern

  • Replacing state with reducers
  • Pillars: Storage, Dispatch, Reducer
  • Action helpers
  • Calling useReducer()
  • Write mutative code with "immer"

TanStack Query

  • Requests, deduplication, caching
  • Data Fetch
  • Data Updates
  • Plugins

Optimize React performance

  • Using production build
  • Avoiding re-renders
  • Memoizing components with the memo() Higher Order Component
  • useCallback() to make it work properly with memoized callbacks
  • useMemo() to memoize results instead of callbacks

Error Boundaries and Display management with Suspense

  • Managing Errors using ErrorBoundaries
  • Using Suspense for Lazy Loading
  • Using Suspense for Data Fetching

React Server Components (RSC)

  • RSC Architecture
  • Components: Server vs. Clients
  • Client boundaries
  • Client-Server separation
  • Async data and Suspense

React 19

  • Forms and actions
  • Transitions and animations
  • Metadata
  • Directives: "use client" and "use server"

Advanced UI

  • Animating transitions using React-Spring
  • Charts using Chart.js
  • Adding maps using Leaflet and ESRI

Logins and Authentication

  • Basic authentication in React
  • Implementing a login form and a logout button
  • Storing and managing user credentials
  • Protecting routes and components
  • JSON Web Tokens (JWT)
  • Understanding and preventing common security vulnerabilities