English versionEN

Best Practices and Advanced TypeScript Tips for React Developers

Maurice de Beijer

Independent Software Consultant and Trainer

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.

In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

This workshop has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Maurice de Beyer, also known as the Problem Solver, is a Microsoft MVP, freelance developer instructor, and currently works for a Fintech startup in Amsterdam called Someday. He is known for his community work and workshops on advanced TypeScript tips for React developers.

The workshop focuses on best practices in advanced TypeScript tips for React developers. It covers TypeScript and React-related topics, particularly the use of React with TypeScript, and provides tips applicable to other frameworks like Angular, Vue, Svelte, and Node.js.

The workshop covers topics such as handling React components props with TypeScript, making TypeScript stricter, validating data, TypeScript mappings like omit, pick, and read-only, and bridging compile-time safety with runtime type safety.

The strict option in TypeScript's TSConfig sets the TypeScript compiler to a stricter mode, enabling additional checks that help detect potential errors. However, there are additional checks that can make TypeScript even stricter, such as the 'no unchecked index access' option.

Data validation can be done using libraries like Zot or YUP. These libraries allow you to create schemas that validate data at runtime, ensuring the data conforms to the expected types. You can also infer TypeScript types from these schemas to maintain type safety.

The 'no unchecked index access' option in TypeScript ensures that any access to an array or object index is checked for validity, reducing the risk of runtime errors due to undefined values. This option is not enabled by default in strict mode and must be manually set to true in the TSConfig.

To convert JavaScript components to TypeScript in React, rename the file extension from .js to .tsx, define prop types using TypeScript interfaces or type aliases, and ensure the component returns a React element. You can also use generic types and React.FC for functional components.

Common TypeScript mappings include 'omit' to exclude certain properties from a type, 'pick' to select specific properties, 'read-only' to make properties immutable, and custom mappings like 'deep-read-only' to recursively make all nested properties immutable. These mappings help in creating flexible and type-safe code.

You can create a deeply read-only TypeScript type by using a recursive type mapping. By defining a custom type that applies the 'read-only' modifier to all nested properties, you ensure that every level of the type's structure is immutable.

You can infer TypeScript types from a Zot schema using the 'Z.infer' utility. This utility takes a Zot schema as input and generates the corresponding TypeScript type, ensuring that both the runtime validation and compile-time type checking stay in sync.

Maurice de Beijer

158 min

09 Dec, 2022

Comments

Video Summary and Transcription

This workshop covers various TypeScript and React-related topics, including TypeScript compilation and type checking, prop definitions, data validation, and type inference. It explores the use of generics, type mappings, and read-only types to ensure type safety. The workshop also highlights the importance of validating data at the boundary of the application and handling undefined values. It concludes with gratitude for attending and encourages further exploration of TypeScript and React.

Available in Español: Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

React Performance Debugging Masterclass

React Summit 2023

170 min

React Performance Debugging Masterclass

Top Content

Featured WorkshopFree

Ivan Akulov

Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)

react performance best practices advanced debug react debugger react performance react profiler

React Hooks Tips Only the Pros Know

React Summit Remote Edition 2021

177 min

React Hooks Tips Only the Pros Know

Top Content

Featured Workshop

Maurice de Beijer

The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.

react best practices react hooks deep dive react 18 hooks react profiler

React, TypeScript, and TDD

React Advanced Conference 2021

174 min

React, TypeScript, and TDD

Top Content

Featured WorkshopFree

Paul Everitt

ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.

react best practices typescript devtools web development test driven development react

Mastering advanced concepts in TypeScript

React Summit US 2023

132 min

Mastering advanced concepts in TypeScript

Top Content

Featured WorkshopFree

Jiri Lojda

TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.

typescript devtools typescript libraries

Deep TypeScript Tips & Tricks

Node Congress 2024

83 min

Deep TypeScript Tips & Tricks

Top Content

Featured Workshop

Josh Goldberg

TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.

typescript

Designing Effective Tests With React Testing Library

React Summit 2023

151 min

Designing Effective Tests With React Testing Library

Top Content

Featured Workshop

Josh Justice

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

react testing best practices deep dive react testing react testing library test driven development react

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them

React Advanced Conference 2021

39 min

Don't Solve Problems, Eliminate Them

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.

remix best practices web development

Using useEffect Effectively

React Advanced Conference 2022

30 min

Using useEffect Effectively

Top Content

David Khourshid

Stately

Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.

react best practices state management react hook missing dependency

Design Systems: Walking the Line Between Flexibility and Consistency

React Advanced Conference 2021

47 min

Design Systems: Walking the Line Between Flexibility and Consistency

Top Content

Siddharth Kshetrapal

GitHub

The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.

best practices design systems component library

React Concurrency, Explained

React Summit 2023

23 min

React Concurrency, Explained

Top Content

Watch video: React Concurrency, Explained

Ivan Akulov

Google Developer Expert, Web Performance Consultant, Netherlands

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

react performance best practices react 18 deep dive react concurrent mode

Managing React State: 10 Years of Lessons Learned

React Day Berlin 2023

16 min

Managing React State: 10 Years of Lessons Learned

Top Content

Watch video: Managing React State: 10 Years of Lessons Learned

Cory House

reactjsconsulting.com

This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.

react react query best practices indexeddb react react componentdidmount react performance react state management react swr react usetransition rtk query vs react query

React's Most Useful Types

React Day Berlin 2023

21 min

React's Most Useful Types

Top Content

Watch video: React's Most Useful Types

Matt Pocock

Independent

Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.

typescript react element vs component react fc react with typescript