TypeScript + React = ❤️

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

TypeScript is a JavaScript superset that compiles down to vanilla JavaScript and has become increasingly popular. TypeScript proponents proclaim that it eliminates entire classes of bugs that affect our applications. But what exactly are those bugs? Which ones are particular to building React components and applications? Is TypeScript worth the learning curve?

In this session geared towards devs with prior experience building React applications, let’s answer those questions. We’ll walk through the common bugs that infect our apps and learn how the use of strong types with TypeScript can help prevent them. After the session, you’ll be itching to try it out in your next project!

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

The main focus of Ben Alegbedo's talk at React Summit is to showcase TypeScript features that can prevent bugs in React applications and to explain how TypeScript enhances the development experience.

The slides for Ben Alegbedo's TypeScript and React talk are available on his website, BenMVP.com. You can also follow the Bitly link mentioned in the talk.

Ben Alegbedo is a principal front-end engineer at Stitch Fix, a Google developer expert, and a Microsoft MVP in web technologies. He lives in Pittsburgh, California, and is a Christian, husband, and father.

A key benefit of using TypeScript with React, according to Ben Alegbedo, is that props cannot be used within a component without a definition. This helps prevent bugs and provides more confidence when removing unused props.

Ben Alegbedo prefers using interfaces for props in TypeScript because it aligns with how he learned it and fits his mental model. However, he notes that both interfaces and types can be used interchangeably for most cases.

Ben Alegbedo suggests migrating a project to TypeScript incrementally. Start with files that have no dependencies and work your way out to the outer app. This approach allows for a smoother transition and helps manage dependencies effectively.

TypeScript requires you to define exactly what's available in deeply nested prop shapes, thus preventing access to undefined properties. This ensures that all properties are accurately defined and helps catch errors during refactoring.

Ben Alegbedo discusses an advanced pattern involving dependent props where a prop's existence depends on another prop. He demonstrates this with a text component that has a truncate prop and a show expand prop, ensuring invalid configurations are caught by TypeScript.

The advantage of using generics in TypeScript, according to Ben Alegbedo, is that they provide flexibility in handling different types, especially in shareable code. Generics help ensure type safety across various use cases, such as a list component handling different item types.

To participate in Ben Alegbedo's free mini-shop giveaway, visit his website BenMVP.com, go to the mini-shops page, find a mini-shop you are interested in, and send out a tweet with the link. Tag Ben in the tweet and include a selfie for bonus points.

Ben Ilegbodu
Ben Ilegbodu
30 min
17 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The video talk delves into the benefits of combining TypeScript with React to enhance development. It starts by explaining how TypeScript generics can be used effectively in React components and the importance of TypeScript interfaces. The speaker highlights the advantages of using TypeScript for both function and class components in React, such as improved error detection and type safety. The talk also covers advanced patterns like discriminated unions and intersection types for more complex props scenarios. For those looking to migrate from Flow to TypeScript, the speaker mentions useful libraries and tools. Additionally, the video provides insights into how TypeScript can make refactoring easier and more reliable. The speaker offers resources such as remote workshops and a cheat sheet for common TypeScript and React situations, available on his website.
Available in Español: TypeScript + React = ❤️

1. Introduction to TypeScript and React

Short description:

Welcome to TypeScript plus React equals love. I'll be showing off TypeScript features that can prevent bugs in our React apps. Visit BenMVP.com for the slides. My name is Ben Alegbedo, a Christian, husband, and father. I live in the San Francisco Bay Area and work as a principal front end engineer at Stitch Fix. Let's dive into this react plus TypeScript business.

Let's go take a look! Well, hello there! Welcome. First off I want to say happy fifth anniversary to React Summit! Happy Birthday! And welcome to all of you to TypeScript plus React equals love. You know, I kind of actually wish that I would have used a fire emoji instead because that's how awesome, I think, the partnership is between TypeScript and React. But I stuck with the heart emoji.

So I want to spend our time showing off TypeScript features that can prevent bugs in our React apps. OK? So I'm assuming that you have developed in React before, but you know little to know TypeScript. Even if you do know lots of TypeScript, you'll get lots out of this. But for those that don't know TypeScript, I'll be explaining the concepts as we go. And just so you know, these slides, they're already online. If you visit my site, BenMVP.com, you'll find a link there. Or you can follow the Bitly link that's at the bottom there.

All right. So just to introduce myself formally, my name is Ben Alegbedo. I am a Christian, a husband and a father. Real quick, this is my family. That's my wife, Rashida. We've been married 10 years, just last September. That's our oldest daughter, Symone. She is six and a half. Our middle daughter, Avery, who just turned four last month as well. And at the bottom is our son. He's Asher. He's a little over a year and a half, and we're still trying to help him smile in pictures. We're still working on it. So we live in the San Francisco Bay Area, a town called Pittsburgh, California. So not Pittsburgh, Pennsylvania, Pittsburgh, California without the H. I am a principal front end engineer at Stitch Fix, and I'm also a Google developer expert and Microsoft MVP, both in web technologies.

All right. So enough about me. Let's dive into this react plus TypeScript business.

2. React Components and Props in TypeScript

Short description:

A react component is just a function that takes in props and returns JSX. You can use an interface to define the props, and the type of the interface becomes the type of the props argument passed to the app components. Props cannot be used without a definition, which helps catch errors.

So one thing I want to make clear before we begin, though, is that a react component is just a function. There is nothing really special about it. It just takes in props and returns JSX, so it can be treated and typed like any other TypeScript function.

So to start off, you can use an interface to define the props, as you see here, and it is the type of it becomes the type of the props argument that gets passed to the app components. So you can name the interface anything you like. I chose app props here just for an example, but I actually tend to use just props. And you will see that in following slides as we go.

OK, so the first benefit, let's get right to it with TypeScript. Props cannot be used within a component without a definition. So, like, how many times have you had props in a component used without a prop type definition? Right. And in this case, we're trying to use props that loading without defining it in the props above. And that becomes an error. So there are various rules to try to catch these sort of things, but they can be limited. In fact, they're limited in how you call the prop.

3. TypeScript and Unused Props

Short description:

TypeScript gives you the confidence to remove unused props because it wouldn't have allowed it in the first place. The error messages may seem cryptic at first, but you'll become more familiar with them over time.

So similarly, when you can't you can't pass a prop if it hasn't been defined. Right. So here we're trying to pass counts, but count was it in the interface for app props. So how many times have you seen a prop been passed to a component and it's not in the prop types and it doesn't seem to be used in the code, but you're afraid to remove it because because you're just not sure. Well, TypeScript gives you the confidence that you can remove it because it wouldn't have allowed it in the first place. So this error message at the bottom can seem a bit cryptic. To be honest, property count doesn't exist on type intrinsic attributes and app props. But as you encounter them more and more, you'll get a little bit more familiar and used to them.

4. React Prop Types and TypeScript

Short description:

React prop types are optional by default. Script interfaces are required by default. TypeScript will complain if you miss a spot or simply mistake a prop. TypeScript prevents laziness and ensures accurate prop definitions. TypeScript is beneficial in refactors.

OK, the next one. So React prop types are optional by default when you list them. So I see lots of examples where prop types are defined, actually, but none of them are marked with is required. But if you look at the code, the props are definitely required, like they're calling.map on an array and things like that. These are bugs waiting to happen. I script interfaces are required by default, so without doing anything special, you're guaranteed that the values will always exist. That's super nice.

So if I call this component, leaving off the required prop count in this case, it will yell at me. And again, it won't compile. So you can use the question mark to denote that a prop is optional, which means that its value is undefined when it's not passed. So now if I omit the count prop when rendering app, in this example, there's no errors because it will be defaulted to two.

OK, so if you change the name of a prop, all the places using it have to be changed as well. So let's say this prop right here highlighted was originally names, but I changed it to players within the component. So you go and you search and replace to fix all of the issues. But did you get them all? How can you be 100 percent sure? What if somebody was doing something crazy and it didn't match your regular expression? Well, TypeScript will complain if you miss a spot. And actually a derivative of this is when you simply mistake a prop. TS will complain immediately as well.

OK, number four, so it looks it's a lot of work to define a deeply nested shape. Right. Even with ES lit rules, we find ways to cheat. There's nothing forcing the prop types to be 100 percent accurate. Well, TypeScript is now going to get in your way and prevent you from being lazy. Prevent us from being lazy. Let me put myself in there, too. But it's also saving you because you have to define exactly what's available. You can't access properties off the user prop unless you define exactly what they are. So if we decide in the address interface to rename is primary to just primary, we'll get TypeScript errors all throughout the app and the app component until we fix those. So, again, TypeScript is being very beneficial in refactors.

OK, so the next one and this one actually is probably my favorite. So with prop types, all you get is prop types that funk for a function.

5. TypeScript and Function Errors

Short description:

In TypeScript, you have to define both the arguments and return value of a component. If you make changes, TypeScript will error out unless you fix all the affected places. Functions are often called as a result of user interaction, making it easy to miss errors during manual testing.

Right. There's nothing that tells a user of the component what parameters it will pass when it's called or if it expects something to be returned. Right. All you get is that. Well, now in TypeScript, you have to define both the arguments as well as the return value. And once again, if we decide to add a second parameter to on change, for instance, or change the types of the parameters, TypeScript will error out unless we fix all those places. This happens all the time. Right. How many times have you forgotten to change a functional handler and some places? Right. And the thing is, about functions is that they're usually called as a result of a user interaction, meaning you're less likely to hit this error while manually testing. So now you're relying on your great test coverage to catch these errors. And, you know, we know how that goes. Right.

6. Advanced Pattern: Dependent Props

Short description:

Sometimes you have a component with dependent props. For example, a text component that truncates text with a truncate prop and provides a show expand prop. To ensure a better developer experience, we want to make the show expand prop dependent on the truncate prop. We can achieve this by defining common props, using a discriminating union for the truncate prop, and creating an intersection of common props and truncate props. Finally, both truncate and show expanded are typed as optional Booleans.

OK, so let's take a look at an advanced pattern. Right. Sometimes you have a component and it has dependent props. So let's say you have this text component that allows you to truncate text with a truncate prop. Right. And it also has a show expand prop to provide a link, a little link to click and expand the truncated text. Well, the show expand prop doesn't really make sense without the truncate prop. So you want to make that configuration an error. Right. It's much better developer experience for users of the text component. If that's the case.

So exactly how do we make this possible? How do we get this error at the bottom for those invalid configurations? Well, there are a couple of ways that you can set this up. And this here is my preferred approach. So first you define your common props, which are the props that will always exist no matter what. Right. Then next, the truncate props type is what's called a discriminating union. OK. Fancy term. But it just means a number of objects combined together one or the other. So then within that first is for the truncate prop for when the truncate prop is false. Or undefined, so it's not specified. So in this case, you were going to set show expand to be undefined. The translation basically is that show expand cannot be set when truncate is false or undefined. All right. And then second is for when the truncate prop is specifically set to true and only true. So when it's turned on, in this case, show expanded is an optional Boolean. We're now allowed to make this extra configuration. So then props is the intersection or the combination of common props and truncate props. It's basically all of the props together. So then finally, in the code, both truncate and show expanded are typed as optional Boolean.

7. Type Safety and Advanced Pattern

Short description:

You can use props as needed in the code and ensure their existence. Let's explore another advanced pattern for type safety. We want to support all button element props and ensure type checking. Currently, we rely on React runtime errors for validation. Let's make this type safe by defining new props and intersecting them with button element props. If there is a conflict, we override the variant and size with the new props.

So you can use them as you need inside of the code and check to make sure that they exist as necessary.

OK. So then let's look at another advanced pattern. Let's say I've got my button component, right. That's a wrapper over HTML and HTML button. It has some props to control the visual design at the top like variant in size. But I also want to support all of the button elements, props like being able to pass in type on click, disabled, et cetera, et cetera, et cetera. And of course, I want them all type checked.

This is all about type safety. So we already do this sort of thing without types. TypeScript, we pass along a whole bunch of unknown props to an underlying button element. But there is no validation in just vanilla JavaScript. So I could pass literally any prop and we're relying on runtime errors from React to tell us like, oh, wait, wait. You cannot pass an H ref attribute to a button element. And it will complain in the error console.

Well, let's try to make this type safe. Instead, this is what our TypeScript definition could look like. Again, there are a number of different ways that we can accomplish this, but this is the way that I like to accomplish it. All right. So first, you define whatever are the new props. And I'm calling it new props as the interface. So in this case, this will be variant and size. These are the stuff that's on top of what a button element has. Then we want to define props that type as the intersection of new props and all of the button element props. Right. But there may be a chance that the button element already has a variant or size prop in it. So here's the catch. In which case we want to override. Right. The variant and size with the ones that are in new props.

8. TypeScript and Button Element Props

Short description:

But when there are name collisions and interfaces and types, weird things happen in TypeScript. We want all of the button element props, except the new ones that we're defining. In the component code, we can spread button props like we always do, except now button props is fully typed. Lastly, let's say you have a list component that has a render prop for each item. The list needs to be able to handle different types. We want to be able to know the type of the item param in the render prop based upon the type of the item's prop. Here's how we make it happen.

But when there are name collisions and interfaces and types, weird things happen in TypeScript. I'm not quite sure what those are yet, but I know that they happen. So we want all of the button element props, except the new ones that we're defining. Right. So that's what this line is doing. We use keyof to get all of the prop names out of new props. That would be variant. That would be size. Then we remove or omits those props using the omit utility generic. So we remove them from the button element props. Then finally, we merge those in to the new props and we have our type for our props for button.

Then finally, in the component code, we can spread button props like we always do, except now button props is fully typed. It knows that type is in there. Onclick is in there. All of the attributes that a button has. Now, the users of button though, wouldn't be able to specify an href prop, for instance, or some other prop that doesn't exist because that is not on the type. We would get an error.

Lastly, my last feature that I want to show you is, let's say you have a list component that has a render prop for each item. But, list is generic so it doesn't know what sort of items it's getting because it doesn't really care about what items it's getting. All it's doing is just displaying it and then maybe having dividers in between or something like that. It's the render prop that does the work of rendering the actual UI of the items. So, my biggest beef with render props in general is that I literally have no idea of what I'm getting when I'm not using TypeScript. So, now with TypeScript, in this case, the list needs to be able to handle different types. So, on the left, we pass an array of strings and we call .length on each item. On the right, we have an array of numbers and we call .toFixed on the data just to prove that we're calling different properties. So, we want to be able to know the type of the item param in the render prop based upon the type of the item's prop, right? We have to have that relationship. And, in this case, we're not typing what item is, so it's all based upon what's in items. So, you can imagine if items were an array of objects, let's say, how much more necessary this sort of functionality would be. So, here's how we make it happen. Like I said, a render prop is just a special function that happens to return React.

9. TypeScript Generics and React Resources

Short description:

But it can be typed just like any other prop function. The list component first defines a generic parameter T. It then passes T over to the interface. The render prop is going to be passed items of type T. Generics are critical and helpful in shareable code. TypeScript generics for people who gave up on understanding generics. The React TypeScript cheat sheet provides recipes for common situations. TypeScript works for both function and class components. I periodically host remote React workshops called mini shops, including TypeScript for React developers. Visit benmbp.com for more information.

But it can be typed just like any other prop function. And, with the power of generics, it can be generically typed. So, the list component first defines a generic parameter T. That's in the angle brackets there. It then passes T over to the interface. So, props of T. Which, and then third, it says that the items are an array of these T types. We don't know what T is, but it's a generic type. And then next, the render prop is going to be passed items of type T. So, T is malleable. It can change depending on how the component is rendered. So, when I render a list and pass strings, T is now a string. But when I render a list and pass numbers, T is now a number. So, list is generic, or parametrized as I call it. So, one quick thing I want to note is that this little angle bracket T comma bit, it's a little weird and not normally what you would do with generics, but the comma is necessary when you define a component using arrow functions. Otherwise, the parser can't tell the difference between JSX or an arrow function. So, generics are pretty mind-bending at first, as you might be feeling if you've never seen them before, but they're also really critical and helpful in shareable code. So, I've included this link at the bottom as a resource for you. TypeScript generics for people who gave up on understanding generics. Pretty epic.

Okay, so I've got some other resources here as well for you. The most helpful one will likely be the one at the top, the React TypeScript cheat sheet. It provides lots of recipes for common situations for you. I also only talked about function components, but TypeScript does work for class components as well. I mean hooks are the future, so you should be using functions. But if you want to use classes, some of these resources have examples for you there.

So before I finish, though, I periodically host a series of short three-hour remote React workshops. I call these mini shops and one of them is called TypeScript for React developers. So if you're interested in a more hands-on learning of TypeScript plus React doing exercises and that such, you should check it out. Just visit my website, benmbp.com, and you'll see them listed there.

10. Free Giveaway and Conclusion

Short description:

I have others as well that you see there, zero to React with hooks, which is an intro migrating from class components to React hooks and such. I am doing a free giveaway for the conference attendees to celebrate this fifth anniversary of React Summit. So if you go to my website again, benmbp.com, go to the mini shops page, find one, one mini shop that you like and that you can attend and send out a tweet with the link of it. Tag me in it so I know you sent it out and I'll pick one to give a free ticket. And bonus points, if you can actually include a selfie of you watching this talk or during the Q&A. So hopefully you found it all insightful and it's motivated you to use TypeScript in your next project or maybe even in your current React project. The slides are already available online. Visit bennvp.com. If you've got questions, feel free to reach out to me on Twitter, at bennnvp, and we can chat there. Thank you so much. I am a huge TypeScript fan, so I always appreciate a good TypeScript talk.

I have others as well that you see there, zero to React with hooks, which is an intro migrating from class components to React hooks and such.

So what I want to let you know, though, is that I am doing a free giveaway for the conference attendees to celebrate this fifth anniversary of React Summit.

So if you go to my website again, benmbp.com, go to the mini shops page, find one, one mini shop that you like and that you can attend and send out a tweet with the link of it.

Tag me in it so I know you sent it out and I'll pick one to give a free ticket.

All right. And bonus points, if you can actually include a selfie of you watching this talk or during the Q&A.

All right. Free giveaway there.

All right. So that's it.

I know. I just flooded you in 20 minutes with a whole bunch of information.

So hopefully you found it all insightful and it's motivated you to use TypeScript in your next project or maybe even in your current React project.

That would be awesome.

So, again, the slides are already available online.

Visit bennvp.com.

I keep sending you there.

The slides are there.

Or you can follow that Bitly link.

If you've got questions, feel free to reach out to me on Twitter, at bennnvp, and we can chat there.

All right.

Thanks.

And I hope you enjoy the rest of the conference.

Thank you so much.

I am a huge TypeScript fan, so I always appreciate a good TypeScript talk.

We actually have a ton of questions from the audience.

So I'm going to just jump right in.

First of all, your kids are super cute.

Well done.

Thank you.

11. TypeScript and Rest Props

Short description:

Rest props are always typed in TypeScript, ensuring safety in your code.

Thank you very much. All right. So somebody asked, how about dot dot dot others that get spread blindly to subcomponents, I assume is referring to a prop? So that's the ability to be able to type the rest of the parameters that are passed to your props. So I talked about it a little bit at the end there that there is a way to type those sorts of things. So you have to be able to communicate to TypeScript. Let it know that it's a. This is different situations. So if you define eight props and you only pull out three props, the rest props will have the other five. So those are always going to be types. So anything in TypeScript is type. There's no longer a junk drawer of objects. So there are various different ways that you can make that more sophisticated. But the result is that rest props are always typed. Safety first.

12. Using Types and Interfaces for Props

Short description:

When using TypeScript for props, there is not much difference between types and interfaces. It comes down to preference. I tend to use interfaces for base props, but types are useful for more sophisticated props like discriminated unions.

All right. Our team asks when would you use a type for your props and when would you use an interface? So I get this question all the time. Right. And I think this is maybe a just a problem with TypeScript. Maybe I'll call it not even a problem, but just a confusion with TypeScript. And even on their docs where they talk about TypeScript versus interfaces, they go into all this nuances about the differences. And basically what it is, is ninety five, ninety six, ninety eight percent of the time there's no difference. You can do the exact same thing with interfaces that you can do with types. So it really comes down to preference. I tend to use interfaces for my props just because that's how I learned it. And it kind of makes sense in my mental model, but you can totally use types as well. And you can extend types just like you can extend interfaces, just a different syntax. But once you start using more sophisticated props and maybe discriminated unions like I was showing there, you'll end up using types. But for the base ones, I just use interfaces.

Cool. So, to answer the question, not much difference. But interfaces are the popular kid. At least to me and most of the docs that I see. Same. So, we both say it, so then that must be the way that it is. Of course, because we're the experts, right? Exactly.

13. Migrating to TypeScript and Flow Conversion

Short description:

Migrating to TypeScript from no TypeScript should be done incrementally. Start with files that have no dependencies and work your way out. Converting from Flow to TypeScript can be challenging, but there are libraries like Flow to TypeScript and tools like the one from Airbnb that can help automate the process.

This is – oh, I love this question. I'm sure you get it all the time. Do you have a take about migrating to TypeScript from no TypeScript, but also from Flow? Yes. Okay. So, that's interesting. So, from no TypeScript, my suggestion is always to migrate incrementally. So, don't do a whole big rewrite with one PR that's like, we are now on TypeScript. Nothing like that, please. So, if you're going to do it incrementally, the easiest approach is to take the files that have no dependencies, that everything else depend on, and start with those, and then work your way out until basically you get to the outer app. Because it's much easier to import a JavaScript, it's much easier to import a TypeScript file from a JavaScript file than the reverse, because a TypeScript file needs the type information, so work your way out, and that's a good strategy. Going from Flow is actually something interesting that I haven't thought about in a while. So I wrote one of my original apps in Flow years ago, and I recently tried to convert it to TypeScript. I did it manually now, and it didn't, it didn't really go so well, but that was mainly because there were some big differences between Flow. It was really old Flow, too, so, but I've seen some, there's some libraries, there's a library from Khan Academy. It's called Flow to TypeScript basically, or Flow to TS, something along those lines that they, folks can look at, so there may be a way to automate it as well. One last thing, I just heard about, there is a tool from Airbnb, don't know the name of it, but I'm going to look it up, that goes from vanilla JavaScript to TypeScript, so it takes your vanilla JavaScript, puts it into an AST, Babel AST, more or less, and then converts it to TypeScript. So who knows how readable that TypeScript is? I have to take a look and see what it's like, but that's also an option to kind of jump start your TypeScript journey.

14. Suitability of TypeScript for Projects

Short description:

TypeScript is not suitable for libraries that shouldn't be transpiled, but for everything else, it's a good candidate. The decision to use TypeScript depends on the team's experience. For small projects, it may not be worth learning TypeScript, but for larger projects with more people, it makes sense to learn TypeScript. Once you know TypeScript, there's no reason not to use it.

Well, if a computer made it, who knows? All right. Melanie asks, what project is TypeScript not suitable for, if any? Melanie, so I think, okay, so I think the only thing that TypeScript is not suitable for is a library that shouldn't be transpiled in general. So it has nothing to do with TypeScript but you're writing some node script or whatever and it needs to be as small as possible because it's used all the time, then you probably just want to write it in vanilla ES5 and not have any transpiling happen. Other than that, I would say TypeScript is a good candidate for anything. It just depends on the experience of the team as to whether they know TypeScript. So if it's something really tiny and people don't know TypeScript, then it doesn't really make sense to learn TypeScript for that tiny thing. But if it's something tiny and I'm writing it, I'm going to write it in TypeScript because I already know it. The learning curve is already—I've already made that journey up the learning curve. So the bigger the project, the more people on the project, the better it makes sense to learn TypeScript for the first time, I would say. So that might be kind of the question behind what she was asking. But in general, once you know TypeScript, there's no real reason to not use it for anything.

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

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
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.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
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.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
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 🤐)
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
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.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
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.