All Pro Workshops

Advanced React with TypeScript

Matt Pocock
Matt Pocock
Advanced React with TypeScript

React is the framework for professional web development.

The scale and complexity of web applications is always expanding. This has led to missed deadlines, higher costs, and deep frustration on developers like you and your team.

TypeScript is the language of choice for professional web developers. TypeScript lets teams build faster, more robust applications.

TypeScript solves a lot of problems, but it's not a silver bullet. It’s a complex language with a lot of features, and is challenging to use effectively– particularly when it comes to React.

TypeScript with React is a high-wire act.

You have to keep your components flexible, type-safe, and structured so you can take advantage of inference and not sacrifice maintainability down the line.

As soon as you start throwing anys around or duplicating code you know should be reusable, you’ve lost the plot.

Advanced React with TypeScript by Matt Pocock is your secret weapon.

You’ve found the magic wand you need to stop fighting TypeScript and make it do YOUR bidding like a true wizard.

In this Advanced React with TypeScript workshop, you’ll learn how to combine the most important concepts and patterns of React with TypeScript.

This combination is a superpower that will change the way you and your team build web applications.

You’ll write custom hooks that use generics, share some (but not all) props between components, and remove guesswork by diving into the types behind the scenes of React and other popular libraries.

This workshop has been vetted and tested with professional senior+ React developers and teams like yours.

Advanced TypeScript with React includes over 50 exercises spanning six in-depth sections:

Advanced Props with TypeScript

Handle props and custom components

Learn how to shape props to support multiple variants, share selected props between different components, use union types for conditional rendering, and other best practices for your components.

TypeScript Generics in React

Leverage generics for your components and custom hooks

TypeScript generics are a key tool in creating flexible, reusable components and hooks in React.

Generics can be used to define how components should be rendered based on the data and structures passed in. You'll work with custom hooks that support async operations and proper error handling, as well as combine generics with useState and useReducer for complex state management. The exercises in this section will fundamentally change the way you build components.

Advanced React Hooks with TypeScript

Harness types to create safer hooks

Using TypeScript with React Hooks provides serious benefits. You will practice with advanced concepts like returning read-only tuples from custom hooks and implementing function overloads for built-in hooks like useState. You'll implement loading and error states for an async hook, while provided a cancellation mechanism to avoid memory leaks. By the end of this section, you'll have the tools to create well-typed hooks that elevate your component development workflow.

Types Deep Dive

Read behind the scenes to build your understanding

The TypeScript type system forms the backbone of React and other libraries you use on a regular basis. But the errors it gives you can be confusing in the extreme.

Examine the various members of the React namespace, and how to use them to build better prop types. From understanding JSX.IntrinsicElements to augmenting React’s types themselves, you’ll learn everything you need to remove the guesswork when solving React’s nastiest TypeScript errors.

Advanced Patterns in React with TypeScript

Recognize and follow industry-standard patterns

Combining community-adopted React patterns with TypeScript features can significantly optimize your applications and the way you write code. You will work with classic component patterns like Render Props and Higher Order Components, solve the forwardRef problem, and master the ‘as’ prop– all with the added benefits of type safety.

The patterns you learn here will give you ideas for refactoring your existing React codebase - and build powerful design systems

Leveraging External Libraries

Safely integrate external libraries into your React components

Libraries supercharge your React development productivity. But they can be a double-edged sword. With TypeScript, you’re not just adding runtime code– you’re adding types to your project.

You'll create type-safe form components with react-hook-form, and learn how to master third-party generics with react-select. You will look behind the type definitions behind React Query, and apply what you learn to defining a custom hook to encapsulate its functionality. The lessons you learn from diving deep into types in node modules will be applicable to any third-party library you choose to use.

Prerequisites

You'll need a working knowledge of React, as well as foundational TypeScript knowledge. Working through the React with TypeScript Tutorial is recommended.