VOOZH about

URL: https://www.coursera.org/learn/packt-advanced-react-patterns-testing-and-next-js-pgcvw

⇱ Advanced React Patterns, Testing, and Next.js | Coursera


Advanced React Patterns, Testing, and Next.js

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

What you'll learn

  • Implement advanced React patterns like custom hooks, render props, and higher-order components.

  • Optimize React app performance using memoization techniques, lazy loading, and virtualization.

  • Master routing, navigation, and server-side rendering with Next.js.

  • Gain expertise in testing React applications using React 19 testing methods, including async testing.

Details to know

Shareable certificate

Add to your LinkedIn profile

Recently updated!

May 2026

Assessments

11 assignments

Taught in English

Build your subject-matter expertise

This course is part of the The Complete React 19 Developer Course (incl. Next.js 16) Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 9 modules in this course

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course.

Dive into advanced React patterns like custom hooks, render props, and higher-order components while mastering performance optimization with memoization, virtualization, and more. Gain hands-on experience building with Next.js, covering concepts from routing and navigation to full-stack data integration. In addition to understanding modern state management techniques with tools like Redux Toolkit, Zustand, and React Query, you'll also tackle React 19 testing, including unit, snapshot, and async testing. The course progresses from foundational React patterns to advanced performance techniques and full-stack Next.js development. As you explore React Router, data fetching with TanStack Query, and Next.js features, you'll be empowered to architect scalable, high-performance web applications. This course is ideal for intermediate developers who are familiar with React basics and want to take their skills to the next level with cutting-edge React patterns, testing methodologies, and full-stack capabilities. By the end of the course, you will be able to design and implement reusable React patterns, optimize performance, integrate APIs in Next.js, and conduct effective unit and integration tests.

In this module, we will dive into React's custom hooks. We will cover how to create and implement custom hooks for managing reusable logic, such as form state and validation. You'll learn to optimize your code structure by encapsulating complex logic into reusable functions.

What's included

2 videos2 readings1 assignment

2 videosβ€’Total 16 minutes
  • Introduction to Custom Hooksβ€’10 minutes
  • Building a Custom Hook for Formsβ€’6 minutes
2 readingsβ€’Total 20 minutes
  • Introduction to the course 'Advanced React Patterns, Testing, and Next.js'β€’10 minutes
  • Full Course Resourcesβ€’10 minutes
1 assignmentβ€’Total 15 minutes
  • Custom Hooks - Assessmentβ€’15 minutes

In this module, we will explore advanced patterns for building reusable and maintainable React components. Topics such as Render Props, Compound Components, and HOCs will be covered, helping you create more flexible and scalable applications. You will also learn about patterns that allow for better state management and prop handling.

What's included

8 videos1 assignment

8 videosβ€’Total 68 minutes
  • Render Props Patternβ€’6 minutes
  • Controlled vs Uncontrolled Componentsβ€’7 minutes
  • Compound Components Patternβ€’10 minutes
  • Higher Order Components (HOCs)β€’5 minutes
  • Function as Children Patternβ€’10 minutes
  • Prop Getters & Prop Collectionsβ€’14 minutes
  • State Reducer Patternβ€’10 minutes
  • Controlled Props Patternβ€’7 minutes
1 assignmentβ€’Total 15 minutes
  • Advanced React Patterns - Assessmentβ€’15 minutes

In this module, we will focus on improving React application performance. You will learn how to optimize rendering using memoization techniques, lazy loading components, and virtualizing large lists. Additionally, we will teach you how to use React DevTools Profiler to identify and fix performance issues.

What's included

8 videos1 assignment

8 videosβ€’Total 48 minutes
  • Introduction to Performance in Reactβ€’5 minutes
  • React.memo β€” Memoizing Componentsβ€’6 minutes
  • Another Example Using React.memoβ€’4 minutes
  • useCallback β€” Memoizing Functionsβ€’7 minutes
  • useMemo β€” Memoizing Expensive Calculationsβ€’6 minutes
  • React Virtualizationβ€’6 minutes
  • Lazy Loading Components (React.lazy + Suspense)β€’7 minutes
  • Profiling React Apps with React DevTools Profilerβ€’8 minutes
1 assignmentβ€’Total 15 minutes
  • Optimising React Performance with Memoization, Virtualization, Suspense, etc. - Assessmentβ€’15 minutes

In this module, we will cover routing and navigation within React applications. You'll learn how to configure nested routes, handle dynamic URL parameters, and apply route protection based on authentication status. This section will also explore techniques for implementing efficient and flexible routing structures.

What's included

7 videos1 assignment

7 videosβ€’Total 62 minutes
  • Introduction to Routing in Reactβ€’8 minutes
  • Nested Routes & Layouts (using )β€’7 minutes
  • URL Parameters & useParamsβ€’15 minutes
  • Search Params & Query Stringsβ€’9 minutes
  • Programmatic Navigation with useNavigateβ€’8 minutes
  • Protected Routes (Auth Example)β€’10 minutes
  • Code Splitting & Lazy Loading Routesβ€’4 minutes
1 assignmentβ€’Total 15 minutes
  • Routing & Navigation in React (with React Router 7 / latest React 19 syntax) - Assessmentβ€’15 minutes

In this module, we will delve into advanced form handling in React. You will learn to manage form data, validate inputs using react-hook-form and Yup, and create custom input components for complex forms. This section will ensure that you can implement robust, scalable form solutions in your React applications.

What's included

5 videos1 assignment

5 videosβ€’Total 43 minutes
  • Review of Controlled vs. Uncontrolled Inputsβ€’2 minutes
  • Handling Forms in React (Basic)β€’7 minutes
  • Advanced Form Handling with react-hook-formβ€’11 minutes
  • Schema Validation with Yupβ€’12 minutes
  • Custom Input Componentsβ€’10 minutes
1 assignmentβ€’Total 15 minutes
  • Forms - Validation & Advanced - Assessmentβ€’15 minutes

In this module, we will explore data fetching and state management in React. You will learn how to fetch data from APIs using fetch and useEffect, manage global state with Zustand, and utilize Redux Toolkit for complex state logic. Additionally, we will cover error handling to ensure seamless user experiences.

What's included

8 videos1 assignment

8 videosβ€’Total 100 minutes
  • Review of Data Fetching Basics (fetch + useEffect)β€’11 minutes
  • React Query (TanStack Query) - Using useQuery for API Callsβ€’12 minutes
  • Query Caching & Refetchingβ€’16 minutes
  • Global State with Zustandβ€’13 minutes
  • Redux Toolkitβ€’17 minutes
  • Error Boundary (Synchronous Error Handling)β€’11 minutes
  • Error Boundary + Suspense (Asynchronous Error Handling)β€’10 minutes
  • Modern Error Handling with react-error-boundaryβ€’11 minutes
1 assignmentβ€’Total 15 minutes
  • Data Fetching & State Management (React TanStack / Zustand, Redux Toolkit) - Assessmentβ€’15 minutes

In this module, we will focus on testing React components. You will learn how to use testing libraries to test the rendering and behavior of components, including form fields and conditional rendering. We will also dive into snapshot testing and simulating user events to ensure your components work as expected.

What's included

13 videos1 assignment

13 videosβ€’Total 100 minutes
  • Introduction to React Testing - Basic Renderingβ€’15 minutes
  • Querying Elementsβ€’8 minutes
  • Prop-based Behaviourβ€’6 minutes
  • Testing Conditional Renderingβ€’6 minutes
  • Testing Form Field Initial Valuesβ€’5 minutes
  • Snapshot Testingβ€’12 minutes
  • User Events - Testing Input Typing with userEvent.typeβ€’5 minutes
  • User Events - Testing Button Clicks with userEvent.clickβ€’6 minutes
  • User Events - Conditional Rendering with userEventβ€’5 minutes
  • Using fireEventβ€’5 minutes
  • Testing Toggle Interactions (Expand/Collapse)β€’9 minutes
  • Testing Asynchronous Data Fetchingβ€’11 minutes
  • Testing Error States in Asynchronous React Componentsβ€’7 minutes
1 assignmentβ€’Total 15 minutes
  • React 19 Testing - Assessmentβ€’15 minutes

In this module, we will explore the various rendering techniques available in React, including SSR, SSG, and ISR. You will gain an understanding of when to use each method to improve performance and scalability. This section will equip you with the knowledge to make informed decisions about rendering strategies.

What's included

1 video1 assignment

1 videoβ€’Total 11 minutes
  • Client/Server Side Rendering - SSG - ISR Concepts and Comparisonsβ€’11 minutes
1 assignmentβ€’Total 15 minutes
  • Client/Server Side Rendering - SSG - ISR Concepts and Comparisons - Assessmentβ€’15 minutes

In this module, we will dive deep into Next.js 16, exploring its powerful features such as file-based routing, SSR/SSG/ISR, and server-side logic. You'll learn how to set up a Next.js project, integrate client-server components, and leverage API routes for full-stack development. This section will prepare you to build scalable and efficient Next.js applications.

What's included

43 videos1 reading3 assignments

43 videosβ€’Total 664 minutes
  • Introduction to Next.js & Project Setupβ€’16 minutes
  • File-based Routing & Navigationβ€’6 minutes
  • Layouts vs Old Custom App Componentβ€’9 minutes
  • Nested Layoutβ€’4 minutes
  • Next.js 16: SSR / ISR / SSGβ€’17 minutes
  • Client Components & Server Componentsβ€’10 minutes
  • Passing Data from Server to Client Componentsβ€’7 minutes
  • Interleaving Server and Client Componentsβ€’12 minutes
  • Context Providersβ€’19 minutes
  • Third-party Componentsβ€’16 minutes
  • Next.js 16 API Routes & Fullstack Featuresβ€’30 minutes
  • Using a Database in Next.js (Fullstack Data Persistence)β€’12 minutes
  • Server-Sent Events in Next.js (SSE)β€’21 minutes
  • Database Relationships (Users + Messages)β€’18 minutes
  • Building a Functional Contact Formβ€’31 minutes
  • Server Actions - A Powerful Next.js Featureβ€’11 minutes
  • Add Metadata to Client and Server Componentsβ€’9 minutes
  • Build a Database Viewerβ€’20 minutes
  • Build a Courses Table and Seed it with Courses Dataβ€’9 minutes
  • Switching from API to Database Data + Image Optimizationβ€’18 minutes
  • Next.js Paramsβ€’16 minutes
  • Authentication - Users Table Creation and Seedingβ€’16 minutes
  • Authentication - Configuration with JWTβ€’27 minutes
  • Authentication - Building an Auth-Aware Navigation Barβ€’20 minutes
  • Authentication - Loginβ€’27 minutes
  • Authentication - Signupβ€’28 minutes
  • Authentication - Email Verificationβ€’12 minutes
  • Authentication - Restrict Pagesβ€’7 minutes
  • Authentication - Password Resetβ€’38 minutes
  • Authentication - Google Loginβ€’17 minutes
  • Authentication - Github Loginβ€’6 minutes
  • Adding Foreign Keys for Course in Messagesβ€’10 minutes
  • Add Zod Validation to Message Formβ€’9 minutes
  • Restrict Chat Rooms to a Single Courseβ€’14 minutes
  • Using ErrorBoundary and Suspense for Safe Component Renderingβ€’10 minutes
  • Pull Messages Using a Server Actionβ€’10 minutes
  • Implementing Pagination for Message Historyβ€’16 minutes
  • Include User and Course When Posting a Messageβ€’15 minutes
  • Broadcast New Message to Connected Usersβ€’12 minutes
  • Optimistically Delete a Message and Notify All Users in Real Timeβ€’19 minutes
  • Optimistically Edit a Message and Notify All Users in Real Timeβ€’21 minutes
  • Next.js 16 Middleware - Restrict Protected Routeβ€’13 minutes
  • Next.js 16 Middleware - Restrict Admin Pageβ€’8 minutes
1 readingβ€’Total 10 minutes
  • Conclusion to the Course 'Advanced React Patterns, Testing, and Next.jsβ€’10 minutes
3 assignmentsβ€’Total 90 minutes
  • Next.js 16 - A Comprehensive Course - Assessmentβ€’15 minutes
  • Full Course Assessmentβ€’60 minutes
  • Full Course Practice Assessmentβ€’15 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Packt
1,946 Coursesβ€’575,115 learners

Explore more from Software Development

Why people choose Coursera for their career

πŸ‘ Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
πŸ‘ Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
πŸ‘ Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
πŸ‘ Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

This course explores advanced React patterns, testing strategies, and Next.js, covering essential topics like custom hooks, state management, performance optimization, and routing. It is relevant because mastering these patterns and tools is key to building scalable, performant, and maintainable applications in modern React and Next.js development.

This specialization dives deep into advanced React concepts, including custom hooks, state management with Redux and Zustand, performance optimization techniques, and React Router for navigation. It also covers testing React applications with best practices, as well as full-stack development using Next.js, enabling you to create robust, production-ready applications.

By the end of this course, you will be able to implement advanced React patterns like render props, higher-order components, and compound components. You will also learn how to optimize React performance using memoization and virtualization, manage complex routing, and handle dynamic data fetching and state management. Furthermore, you’ll gain expertise in building full-stack applications using Next.js.

This course is intended for developers with prior knowledge of React and JavaScript. Familiarity with React concepts such as components, hooks, and basic state management is recommended. A basic understanding of testing tools and frameworks would be helpful but is not mandatory.

This course is for intermediate to advanced React developers who want to enhance their skills in building scalable, performant applications using advanced patterns and modern tools like Next.js. It is also suitable for developers looking to deepen their understanding of state management, testing, and full-stack development.

The course contains 18 hours of video content. It is designed to be completed at your own pace, but most learners can expect to complete the course in a few weeks, depending on their prior experience and commitment level.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,