We may earn an affiliate commission when you visit our partners.

React 18 Debugging Playbook

Kamran Ayub

Do you wish you spent less time debugging React code? This course will teach you how to quickly diagnose common issues using the React Developer Tools so you can spend more time writing your application.

Spend less time debugging your React app. In this course, React 18 Debugging Playbook, you’ll learn to diagnose issues with the React Developer Tools. First, you’ll explore how the DevTools work and configure them for development and production. Next, you’ll discover how to debug issues with component props, state, and hooks. Finally, you’ll learn how to how to debug rendering and lifecycle issues using the React profiler and scheduler timeline. When you’re finished with this course, you’ll have the skills and knowledge of React debugging needed to quickly diagnose and fix issues for your React application.

Enroll now

Or start your subscription today

And complete this course over a free trial

What's inside

Syllabus

Course Overview

Introducing the React Developer Tools

Inspect Using the Components Tree

Debug Using the Components Tree

Work with Profiling Sessions

Debug Performance with Flamegraphs

Debug Scheduling with the Timeline

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Explores tools used daily in industry

Improves debugging skills for faster development

Strengthens foundation for beginners

Offers hands-on exercises for immediate application

Suitable for learners new to debugging or refreshing skills

Requires learners to come in with some background knowledge

Save this course

Save React 18 Debugging Playbook to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React 18 Debugging Playbook with these activities:

Review React Basics

Show steps

Review the fundamental concepts of React to strengthen your understanding of the course material.

Browse courses on React

Show steps

Go over the official React documentation
Build a simple React app using create-react-app
Experiment with different React components and hooks

Follow Along with React DevTools Tutorials

Show steps

Gain practical experience using React DevTools through guided tutorials, enhancing your debugging skills.

Browse courses on Debugging

Show steps

Find tutorials on the official React DevTools website
Follow the instructions to debug common React issues
Apply the techniques learned to your own React projects

Attend a React Debugging Workshop

Show steps

Accelerate your learning by attending a workshop led by experienced React developers, providing focused instruction and opportunities to practice debugging techniques.

Show steps

Research and find a reputable workshop
Register for the workshop
Actively participate in the training sessions

Five other activities

Expand to see all activities and additional details

Show all eight activities

Join a React Debugging Study Group

Show steps

Connect with fellow learners to share debugging challenges, discuss strategies, and enhance your understanding of React DevTools.

Show steps

Find or create a study group
Participate in regular meetings
Present and discuss debugging techniques

Practice Debugging with DevTools Exercises

Show steps

Reinforce your debugging abilities by working through hands-on exercises using React DevTools.

Browse courses on Debugging

Show steps

Find exercises online or create your own
Identify and fix bugs in React code
Analyze the results and learn from your mistakes

Participate in a React Debugging Challenge

Show steps

Challenge yourself by participating in debugging competitions to test your skills, learn from others, and enhance your problem-solving abilities.

Browse courses on Problem Solving

Show steps

Find and register for a debugging challenge
Analyze the provided code and identify bugs
Submit your solutions and compare results

Write a Blog Post About React Debugging

Show steps

Solidify your understanding by explaining React debugging concepts to others in a blog post, enhancing your communication and teaching skills.

Browse courses on Technical Writing

Show steps

Choose a specific debugging topic
Research and gather information
Write and publish your blog post

Build a Debugging Toolkit

Show steps

Create a personalized collection of tools and resources to streamline your React debugging workflow.

Browse courses on Debugging Tools

Show steps

Gather useful debugging tools and scripts
Organize them in a central location
Document your toolkit for future reference

Career center

Learners who complete React 18 Debugging Playbook will develop knowledge and skills that may be useful to these careers:

React Developer

React Developers are responsible for developing and maintaining React applications. They work with other developers to create and implement features, fix bugs, and improve performance. This course will teach you the essential skills you need to become a successful React Developer. You will learn how to use React to create complex and scalable applications. With the skills you learn in this course, you will be well-prepared for a career as a React Developer.

See salaries and explore the career path for React Developer

Front-End Engineer

Front End Engineers are in charge of the website or web application's user interface (UI) and user experience (UX). They make sure that the website or app is easy to use and visually appealing. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Front End Engineer.

See salaries and explore the career path for Front-End Engineer

Web Developer

Web Developers design and develop websites and web applications. They work on a variety of projects, from small personal websites to large enterprise applications. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Web Developer.

See salaries and explore the career path for Web Developer

Software Engineer

Software Engineers design, develop, and maintain software applications. They work on a variety of projects, from small personal projects to large enterprise applications. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Software Engineer.

See salaries and explore the career path for Software Engineer

Full-Stack Developer

Full Stack Developers are responsible for the entire software development process, from design and development to deployment and maintenance. They work on a variety of projects, from small personal projects to large enterprise applications. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

UI Designer

UI Designers are responsible for the visual design of websites and web applications. They work with other designers and developers to create UIs that are both visually appealing and easy to use. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a UI Designer.

See salaries and explore the career path for UI Designer

UX Designer

UX Designers are responsible for the user experience (UX) of websites and web applications. They work with other designers and developers to create UIs that are both visually appealing and easy to use. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a UX Designer.

See salaries and explore the career path for UX Designer

Software Architect

Software Architects design and develop the overall architecture of software applications. They work with other developers to create applications that are scalable, reliable, and secure. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Software Architect.

See salaries and explore the career path for Software Architect

Technical Lead

Technical Leads are responsible for the technical direction of software development projects. They work with other developers to develop and implement project plans, and they ensure that projects are completed on time and within budget. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Technical Lead.

See salaries and explore the career path for Technical Lead

Product Manager

Product Managers are responsible for the development and marketing of software products. They work with other stakeholders to define product requirements, and they track progress to ensure that products are released on time and within budget. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Product Manager.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers are responsible for the planning, execution, and closure of software development projects. They work with other stakeholders to define project scope, timelines, and budgets, and they track progress to ensure that projects are completed on time and within budget. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Project Manager.

See salaries and explore the career path for Project Manager

Data Analyst

Data Analysts are responsible for collecting, cleaning, and analyzing data. They work with other stakeholders to identify trends and patterns, and they develop solutions to improve business performance. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Data Analyst.

See salaries and explore the career path for Data Analyst

Business Analyst

Business Analysts are responsible for analyzing business needs and developing solutions to meet those needs. They work with other stakeholders to define project scope, timelines, and budgets, and they track progress to ensure that projects are completed on time and within budget. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Business Analyst.

See salaries and explore the career path for Business Analyst

Quality Assurance Engineer

Quality Assurance Engineers are responsible for testing and verifying the quality of software products. They work with other developers to identify and fix bugs, and they ensure that products meet customer requirements. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a Quality Assurance Engineer.

See salaries and explore the career path for Quality Assurance Engineer

DevOps Engineer

DevOps Engineers are responsible for the development and maintenance of software development pipelines. They work with other developers to automate the build, test, and deployment process, and they ensure that pipelines are efficient and reliable. This course will help you build a strong foundation in React, one of the most popular front-end frameworks. You will learn how to use React to create interactive and engaging UIs. With the skills you learn in this course, you will be well-prepared for a career as a DevOps Engineer.

See salaries and explore the career path for DevOps Engineer

Reading list

We've selected 20 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in React 18 Debugging Playbook.

The Pragmatic Programmer

Save

Offers timeless advice and best practices for software development in general. While not specific to React, it provides valuable principles and insights that can benefit any developer, regardless of their experience level or technology stack.

The Pragmatic Programmer: Your Journey To Mastery,...

Hardcover

Pragmatic Programmer, The: From Journeyman to Master

Kindle Edition

(Italiano) Pragmatic Programmer - Edizione del 20°...

Kindle Edition

(Italiano) Il Pragmatic Programmer: Guida per manovali del...

React 18 Debugging Playbook

What's inside

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses