Optimising React Performance with Memoization, Virtualization, Suspense, etc. | The Complete React 19 Developer Course (incl. Next.js 16)

Book Overview & Buying
Table Of Contents

The Complete React 19 Developer Course (incl. Next.js 16)

By : Development Island (UK)

Buy this Video

The Complete React 19 Developer Course (incl. Next.js 16)

By: Development Island (UK)

Buy this Video

Overview of this book

This course takes you from React basics to advanced full-stack development with React 19 and Next.js 16. You’ll start by mastering JSX, props, state management, and event handling, building components and learning to structure React apps properly. Projects like a real estate app and to-do list will help solidify these concepts. As you progress, you’ll dive deeper into useReducer, Context API, and custom hooks. You’ll also explore performance optimization techniques, like memoization, and work on projects like a weather app and card flip game. Full-stack development with Next.js 16 introduces server-side rendering, static generation, and authentication, building out real-time, scalable applications. The final phase focuses on advanced React patterns and real-time features using Server-Sent Events (SSE) and database integration with Supabase. You’ll finish with professional projects like a real-time chat app and portfolio website, ready for job opportunities or freelance work in React development.

React 19 Setup & JSX

Course Introduction

How to Setup React 19 with Vite

Your First React Component

Exporting React Components

Building UIs with JSX: Writing Markup in React

Integrating JavaScript in JSX with Curly Braces

Styling React Components

Working with Props in React Components

Conditional Rendering 1

Conditional Rendering 2

Rendering Lists

Keeping Components Pure

Purity Props Example

JSX Review - Common mistakes - Best practices

JSX Review

Common Mistakes - Best Practices

Professional Project - Cambridge Rentals

Introduction

Component Tree

Building the File Structure

Build the Header

Build the Title

Build the Footer

Build the List of Properties

Build the PropertyTypeLabel Component

Build the PropertyBanner Component

Build the IconWithText Component

Build the PropertyAttribute Component

Adding Interactivity

Responding to Events

Passing Event Handlers from a Parent to a Child

Understanding Event Propagation

Preventing Default Behaviour

React State

State Batching + Updating State Using a Value vs Function

Updating Objects in State

Updating Arrays in State

Create a Shopping Cart

Trigger => Render => VirtualDOM => Commit

Adding Interactivity Review - Common mistakes - Best practices

Adding Interactivity - Review

Professional Project: To Do List App

Introduction

Component Tree

Building the File Structure

Rendering Tasks

Building the TaskControls Component

Building the TaskForm Component

Toggle Task Completion

Delete Tasks

Edit Tasks

Make Changes Persistent Using localStorage

React Reducer

Introduction

Create the Reducer Function

React Reducer Review - Common mistakes and best practices

Professional Project: UK Driving Test - React Reducer

Introduction

Component Tree

Building the File Structure

Managing Quiz State with useReducer

QuestionView: QuestionHeader

QuestionView: QuestionText

QuestionView: AnswerOptions

QuestionView: MediaDisplay

QuestionView: NavigationControls

ProgressBar

AppBanner

ResultView

React Context

Introduction to React Context

Applying React Context to To-Do List App

React Context Review - Common mistakes and best practices

Professional Project: Portfolio Website - Dark/Light Mode, React Context

Introduction

Component Tree

Building the File Structure

Setting Up the Navbar Layout

Desktop Navigation Links

Adding Light/Dark Mode Toggle

Mobile Menu with Hamburger Icon

Building ScrollDots for Navigation

Building the Hero Section

Projects Section Layout

Create the ProjectCard Component

Filtering Projects by Type

Building the Skills & Experience Section Layout

Skills Grid

Experience Timeline

Building the Layout of Recommendations Section

TestimonialCard

ArrowNavigation

Company Logos Row with CompanyLogo Component

Building the Contact Section

Building the Footer

Dark/Light Mode Persisting

Reference values with Refs

Introduction

Creating a Timer Using Ref

Accessing a DOM Node with Ref

Accessing Another Component's DOM Nodes

Best Practices for DOM Manipulation with Refs

Reference values with Refs Review - Common mistakes and best practices

Professional Project: Card Flip Game - useRef

Introduction - User Walkthrough

Component Tree

Building the File Structure

Set Up the Game State in App - Generate and Shuffle Icons Using the Fisher-Yates Algorithm

Build the Settings Component and Define reInitialiseGame in the Process

Reset Button

ScoreBoard

Conditionally Show Graffiti When the Game Is Won

Building the GameBoard Component

Add Flipping Logic to the Card Component

Move Flipping Logic to GameBoard Using Refs

Play a Victory Sound When the Player Matches All Card Pairs

Play Flipping Sound on Card Flip

Reset the GameBoard

React Effects

Introduction to useEffect

useEffect Dependencies

useEffect Cleanup Functions

Listening for a Keyboard Key

Google Maps Resizing

React Effects Review - Common mistakes and best practices

Professional Project: Weather App - useEffect

Introduction - User Walkthrough

Component Tree

Project Structure – Creating Files and Folders

Header

Build SearchBar and Retrieve Real Cities from the Open-Meteo Geocoding API

Build a useEffect to Fetch Weather Data When a City Is Selected

Build a useEffect that Transforms the API Data When Data Changes

Build the CurrentWeather Component

Build the HumidityCard Component

Build the WindSpeedCard Component

Build the HourlyForecast Component

Build the Forecast Component

Professional Project: Story Collection - Multi-language UI, React Context, React

Introduction - User Walkthrough

Component Tree

Project Structure – Creating Files and Folders

Building the Language Context and Wrapping App in the Provider

Routing & Layout with App.jsx

Building the Header

Building the LanguageToggle Component

Building the Footer Component

Supabase Configuration & Environment Setup

StoryList Page – Fetching & Displaying Data

StoryCard Component

StoryDetail Page

StoryDetail Page: Building the Story Content Section

Building the NotFound Page

Build a Beautiful Custom Scrollbar

Professional Project: Kanban Board with Drag & Drop like Trello - useEffect

Introduction - User Walkthrough

Component Tree

Project Structure – Creating Files and Folders

Adding Dark Mode with Theme Toggle and useEffect

Building the Kanban Board: Managing Column State and Rendering Tasks

Adding & Deleting Columns

Adding Tasks

Editing Column Titles

Editing Tasks Inline

Use useRef to Focus and Scroll to the End of the Textarea When Editing Starts

Implementing Task Deletion in the Kanban Board

Implementing Drag and Drop for Tasks

Handling Task Movement on Drag End

Apply Custom Scrollbar Styles Using a Utility Class

Persisting Kanban State to localStorage

Custom Hooks

Introduction to Custom Hooks

Building a Custom Hook for Forms

Advanced React Patterns

Render Props Pattern

Controlled vs Uncontrolled Components

Compound Components Pattern

Higher Order Components (HOCs)

Function as Children Pattern

Prop Getters & Prop Collections

State Reducer Pattern

Controlled Props Pattern

Optimising React Performance with Memoization, Virtualization, Suspense, etc.

Introduction to Performance in React

React.memo — Memoizing Components

Another Example Using React.memo

useCallback — Memoizing Functions

useMemo — Memoizing Expensive Calculations

React Virtualization

Lazy Loading Components (React.lazy + Suspense)

Profiling React Apps with React DevTools Profiler

Routing & Navigation in React (with React Router 7 / latest React 19 syntax)

Introduction to Routing in React

Nested Routes & Layouts (using )

URL Parameters & useParams

Search Params & Query Strings

Programmatic Navigation with useNavigate

Protected Routes (Auth Example)

Code Splitting & Lazy Loading Routes

Forms - Validation & Advanced

Review of Controlled vs. Uncontrolled Inputs

Handling Forms in React (Basic)

Advanced Form Handling with react-hook-form

Schema Validation with Yup

Custom Input Components

Data Fetching & State Management (React TanStack / Zustand, Redux Toolkit)

Review of Data Fetching Basics (fetch + useEffect)

React Query (TanStack Query) - Using useQuery for API Calls

Query Caching & Refetching

Global State with Zustand

Redux Toolkit

Error Boundary (Synchronous Error Handling)

Error Boundary + Suspense (Asynchronous Error Handling)

Modern Error Handling with react-error-boundary

React 19 Testing

Introduction to React Testing - Basic Rendering

Querying Elements

Prop-based Behaviour

Testing Conditional Rendering

Testing Form Field Initial Values

Snapshot Testing

User Events - Testing Input Typing with userEvent.type

User Events - Testing Button Clicks with userEvent.click

User Events - Conditional Rendering with userEvent

Using fireEvent

Testing Toggle Interactions (Expand/Collapse)

Testing Asynchronous Data Fetching

Testing Error States in Asynchronous React Components

Client/Server Side Rendering - SSG - ISR Concepts and Comparisons

Next.js 16 - A Comprehensive Course

Introduction to Next.js & Project Setup

File-based Routing & Navigation

Layouts vs Old Custom App Component

Nested Layout

Next.js 16: SSR / ISR / SSG

Client Components & Server Components

Passing Data from Server to Client Components

Interleaving Server and Client Components

Context Providers

Third-party Components

Next.js 16 API Routes & Fullstack Features

Using a Database in Next.js (Fullstack Data Persistence)

Server-Sent Events in Next.js (SSE)

Database Relationships (Users + Messages)

Building a Functional Contact Form

Server Actions - A Powerful Next.js Feature

Add Metadata to Client and Server Components

Build a Database Viewer

Build a Courses Table and Seed it with Courses Data

Switching from API to Database Data + Image Optimization

Next.js Params

Authentication - Users Table Creation and Seeding

Authentication - Configuration with JWT

Authentication - Building an Auth-Aware Navigation Bar

Authentication - Login

Authentication - Signup

Authentication - Email Verification

Authentication - Restrict Pages

Authentication - Password Reset

Authentication - Google Login

Authentication - Github Login

Adding Foreign Keys for Course in Messages

Add Zod Validation to Message Form

Restrict Chat Rooms to a Single Course

Using ErrorBoundary and Suspense for Safe Component Rendering

Pull Messages Using a Server Action

Implementing Pagination for Message History

Include User and Course When Posting a Message

Broadcast New Message to Connected Users

Optimistically Delete a Message and Notify All Users in Real Time

Optimistically Edit a Message and Notify All Users in Real Time

Next.js 16 Middleware - Restrict Protected Route

Next.js 16 Middleware - Restrict Admin Page

The Complete React 19 Developer Course (incl. Next.js 16)

By : Development Island (UK)

The Complete React 19 Developer Course (incl. Next.js 16)

By: Development Island (UK)

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access