I gave a lightning talk at React Summit US, and did a quick run-through of what's changing in RTK 2.0.I've linked the livestream at the right timestamp for now, and will link the final video when it's live.What's New in Redux Toolkit 2.0 - videoAnd here's the slides:What's New in Redux Toolkit 2.0 - slides(and totally unrelated to my talk, had the chance to lead a Carnival Parade of costumed characters as part of Kathleen McMahon's demonstration of "why you should never include a carousel in your design system!")Kathleen McMahon: Carnival!!! - video

I work at Replay.io, and I've spent all of this year building some incredibly advanced React debugging features that make use of our time-traveling backend API. The biggest one is our React DevTools integration. Early in 2023, I wrote a post for the Replay.io blog on How We Rebuilt React DevTools with Replay Routines, which recapped the initial working version. I've spent much of this year improving on that and building other related features.At React Advanced, I got to share details on how the React DevTools work internally, and dive into how we extract React DevTools component tree data from recorded React apps using a combination of custom Chrome modifications and backend post-processing "routines" that leverage our time-travel API. Along the way, I showed off some crazy tricks like serializing JS functions as strings, sourcemapping original component names from production apps, and generating sourcemaps for React itself!I also got to participate in a group panel discussion about Op

My extensive post "A (Mostly) Complete Guide to React Rendering Behavior" is the most popular and widely appreciated post I've written. After the recent updates to cover React 18, it's now around 10,900 words long!I recently had a chance to give a talk based on that post for React Advanced in 2022 and React Rally in 2023.React Rally 2023I'll link the video once it's available.A (Brief) Guide to React Rendering Behavior - slidesA (Brief) Guide to React Rendering Behavior - livestream videoReact Advanced 2022A (Brief) Guide to React Rendering Behavior - videoAnd here's the slides:A (Brief) Guide to React Rendering Behavior - slides

Table of ContentsIntroductionRedux Packages BackgroundPackages and ConfigurationsIssue HistoryEarly AttemptsMigrating to VitestInitial Alpha TestingResearching Better ConfigurationSetting Up CI Checks for PackagingInitial CI SetupAre The Types Wrong?Packaging Updates, Round 2Switching Build ToolingUMD Build Artifact ChangesWebpack 4 CompatImmer 10 BetaTypeScript DeclarationsRound 2 ResultsOther Package UpdatesUpdating Immer's PackagingProblems with Next.js and React Server ComponentsVentingFinal ThoughtsWhere Do Things Stand Today?Lessons and TakeawaysFuture StepsFurther InformationIntroductionFor the last 8+ years, the JS ecosystem has been undergoing a slow transition towards using ES Modules ("ESM") as the default approach for publishing and using JS code. Similar to the Python 2->3 transition, this has been incredibly difficult and painful to deal with.As a package maintainer, I want to make sure that my libraries are maximally compatible and usable in the widest array of environme

In mid-2021 I had the chance to do a talk on "Debugging Software" for a meetup hosted by Mintbean.io. In 2022, I did an updated "Debugging JS" version of the talk for ThisDot Media's "JS Drops" video series.I previously did a post on Debugging Tips, where I listed some quick tips for thinking about debugging, and recapped the stories of several interesting bugs I ran into and solved.I later had a chance to present this talk at React Summit 2023 in Amsterdam.This talk was based on that post, and covers:Concepts and principles for thinking about debugging, as well as some additional tipsSpecific techniques for debugging, including how to use both print logging and GUI debuggers effectively, as well strategies for debugging React, Redux, and JSA quick example of using Replay to investigate bugs using time-travel debuggingThe slides also include some "Scene of the crime"-themed versions of some of those debugging stories (not covered in the video due to time constraints).Debugging JS - sli

I had the opportunity to talk on a number of different podcasts and interviews over the course of the year. I've gathered them here as a directory.ThisDot / Tracy Lee: How to Contribute to ReduxTracy Lee is a prolific podcaster, and her company ThisDot creates numerous shows related to the JS ecosystem. She had me on as part of a new "How to Contribute..." series, where I talked about ways to contribute to the Redux libraries.https://www.youtube.com/watch?v=rPJmnxDX9lYKevin Ghadyani: Redux vs React ContextKevin and I have done a couple long-form video discussions in the last couple years, and he's split those out into several separate videos.This discussion was actually recorded in mid-2021, but just recently got published. We talked about the actual differences between Context and Redux, and why so many people get confused about the differences.https://www.youtube.com/watch?v=1bIdaWVMFkcPodRocket: Time-Travel Debugging with Replay (with Jason Laster)I previously was a guest on the Pod

IntroductionFor the last couple years, I've thrown around the statements that "Redux is used by 45-50% of React apps", and "Redux is by far the most widely used state management tool for React apps".I've had a couple people ask how I'm coming up with those numbers. I'd written a couple prior comments about this - I tried to estimate React "state management market share" in Feb 2021, and talked some about the flaws in NPM stats as a metric in Feb 2022, but figured it was worth putting into a blog post for posterity.I'll go through the sources I use, discuss the many caveats and limitations with those sources, and then look at Redux and other state management libraries as an example.Primary Source: NPM Package Download StatsThe most obvious source, and the one that everyone including myself automatically turns to, is NPM's stats on how many times a package is downloaded.That info is available through several different pages and aggregators.NPM Package Stats SourcesNPMJS.comThe first is N

I've frequently talked about why we created Redux Toolkit and what APIs it includes as part of my "State of Redux" talks and other similar presentations. I recently had the chance to talk at a couple of online meetups, and put together an updated and consolidated version of that material as a complete "Modern Redux with Redux Toolkit" presentation:Modern Redux with Redux Toolkit - videoModern Redux with Redux Toolkit - slides

I've spoken at Reactathon in past years, and this year I had the chance to give a pre-recorded talk. I also ended up giving the same talk live as well after filling in as a backup speaker.My talk looked at why we use middleware for side effects in Redux, the major libraries (thunks, sagas, observables), why we've recommended thunks, introduces RTK Query and the "listener" middleware, and gives our current recommendations for what tools to use in different scenarios today.The Evolution of Redux Async Logic - slidesThe video should be online in the next few weeks, but for now you can see me give the talk as part of the Day 3 livestream:The Evolution of Redux Async Logic - livestream video

I had the opportunity to give a talk at the first-ever Typescript Congress virtual conference.My talk went over a variety of things I've learned working on the TypeScript aspects of the Redux libraries over the last few years. I covered things like different ways to include types when publishing, approaches for versioning public types APIs, supporting multiple TS versions, debugging and testing types, and some wacky examples of actual types from our libraries.The recorded talk can be viewed on the TS Congress website:Lessons from Maintaining TS Libraries - videoAnd the slides are here:Lessons from Maintaining TS Libraries - slides

IntroIn Redux Toolkit 1.8, we released a new "listener" side effects middleware that is intended to be a lightweight alternative to more widely used Redux async middleware like sagas and observables.The final API and usage of the middleware looks like this:import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';import todosReducer, { todoAdded, todoToggled, todoDeleted,} from '../features/todos/todosSlice';// Create the middleware instance and methodsconst listenerMiddleware = createListenerMiddleware();// Add one or more listener entries that look for specific actions.// They may contain any sync or async logic, similar to thunks.listenerMiddleware.startListening({ actionCreator: todoAdded, effect: async (action, listenerApi) => { // Run whatever additional side-effect-y logic you want here console.log('Todo added: ', action.payload.text); // Can cancel other running instances listenerApi.cancelActiveListeners(); // Run async logic const data = await fetchData(); /

Job UpdateA few weeks ago, I announced that I was actively looking for a new job.Today, I am thrilled to announce that:I'm joining Replay.io!Replay is a true "time-travel debugger": Launch the Replay browser, record the bug, and replay the recording! Replay’s DevTools includes a step-by-step debugger, variable inspection, React DevTools, and even retroactive print statements. Unlike a typical debugger which only lets you go forward, Replay lets you investigate the code at any point in time during the recording, including stepping backwards from breakpoints and print statements that show the values from every time that line ran.I'm really excited about the chance to help build a tool that dramatically improves the debugging experience for developers, by giving them the ability to deeply understand what's happening inside their code throughout its runtime.For a real-world preview of what using Replay looks like, I used Replay to help investigate a Reselect performance issue in a recent R

IntroIn March of 2020, I was reassigned to lead a team building an internal metrics dashboard. This app was built as a classic MEAN project, with a client built using AngularJS 1.x. After I joined the team, I wrote a post recapping how I modernized the codebase by building the AngularJS client with Create-React-App. I also switched package management from NPM+Bower over to Yarn 1.x, switched client tests from Karma to Jest, and was able to use react2angular to begin building new features using React + TypeScript in the middle of the legacy client.Since then, we've continued to modernize all areas of the codebase, and this week we hit a major milestone: we successfully shipped a fully migrated app client built with React, TypeScript, Redux Toolkit, and Next.js! We've done this as an ongoing incremental migration process, while continuing to build new features, fix bugs, and respond to user feedback.This post recaps the migration process and the techniques that we used along the way. Som

IntroductionI was just asked a question about how testing works for Redux applications:For a beginner front-end developer, what would you expect them to know about Redux testing? (techniques and patterns specifically)What - if any - tools are industry-standard for Redux testing? I've seen some tutorials using redux-mock-store, fetchMock, redux-testkit, redux-action-assertions, etc.I ended up writing an extended response about the history of testing Redux apps, the two major styles of testing that I've seen, and how those approaches have evolved over time - clearly worthy of being reposted publicly.Testing ReduxWhat should a beginning dev know about testing Redux?For #1, I wouldn't necessarily expect a beginner to know much testing at all, really :) I actually just spent the last couple weeks helping guide a pair of interns through writing their first React component tests with React Testing Library, and it was a bit eye-opening when I had to explain so many different moving pieces: Jes

This week I had the chance to appear on Jason Lengstorf's "Learn with Jason" livestream show.The topic was "Learn Modern Redux". We started by recapping some of the usual topics ("what is Redux?", "why do some people dislike Redux?", "how has Redux changed?"), and then dove into live-coding a real Redux app. We showed how to create a new React+TS project using the Vite build tool (similar to Create-React-App), add the Redux packages, and set up Redux Toolkit and React-Redux from scratch (including our recommended TS hooks configuration).We then showed how to use the upcoming RTK Query data fetching API to request a list of dog breeds from a public API, and display that data in our UI.I had a blast being on this show, and I think it was a great chance to show folks how we recommend writing Redux code today.The episode page on the "Learn with Jason" site has the embedded video, transcript, and show notes links:Learn Modern Redux - episode page, video embed, and transcriptThe example app