Kent C. Dodds is an active egghead instructor and blogger. This is a collection of screencast versions of his blog posts. You can find his blog here: [kentcdodds.com/blog](https://kentcdodds.com/blog)

[Finite State Machines](https://statecharts.github.io/what-is-a-state-machine.html) are an old concept in computer science that help you remain bug-free while you manage complex state interactions in your application. In this lesson, I'll show you how to implement one so you have an understanding of the fundamentals of what they do.

This is based on my blog post: [Implementing a simple state machine library in JavaScript](https://kentcdodds.com/blog/implementing-a-simple-state-machine-library-in-javascript)

Implement a simple Finite State Machine library in JavaScript

I had a little NodeJS script I wrote to do a quick task for myself and in this video I'll show you a comparison of different approaches to operating on an array, specifically the Array `reduce` method vs chaining `filter` and `map` calls, and finally iterating over the array using a regular for loop. You'll learn why I recommend chaining most of the time.

Array reduce vs chaining vs for loop

It's important to reduce the amount of trivial things readers of your code have to think about so they can reserve their brain space for more important things. Avoiding nesting of closures can help you accomplish this. In this lesson we'll get a quick look at the concept and how it can help reduce cognitive load for readers of your code.

Reduce cognitive load for readers of your code by avoiding nesting of closures

In this lesson we'll see an interesting situation where we're actually calling a function component and getting a dreaded React error: "Rendered fewer hooks than expected." We'll learn why that is happening, how it can be avoided, and how our "workaround" fixes the problem and avoids potential bugs.

This is based on my blog post: [Don't call a React function component](https://kentcdodds.com/blog/dont-call-a-react-function-component)

Fix "React Error: Rendered fewer hooks than expected"

Web Workers have wide cross-browser support. All the way back to IE10. They can seriously help you speed up slow parts of your application. In this lesson we'll learn the total basics of how to get web workers running and communicating across threads.

This is based on my blog post: [Speed up your App with Web Workers](https://kentcdodds.com/blog/speed-up-your-app-with-web-workers)

Get started with Web Workers

Authentication state is one of the things that can really twist up our application's components with a bunch of if statements for handling that state. But there's a simple trick you can apply to reduce the complexity of your components.

This is based on my blog post: [Authentication in React Applications](https://kentcdodds.com/blog/authentication-in-react-applications)

Organization of Authentication State in React Apps

[Netlify Functions](https://www.netlify.com/products/functions/) are super empowering, but they can be a little confusing, so in this lesson you'll learn the total basics of serverless functions using Netlify's Functions functionality.

This is based on my blog post: [Super simple start to serverless](https://kentcdodds.com/blog/super-simple-start-to-serverless)

Get started with Netlify Serverless Functions

Inversion of Control is a simple principle that can drastically improve your reusable code. In this lesson we'll go over the concept and you'll get an idea of how you can apply it for your own abstractions.

This is based on my blog post: [Inversion of Control](https://kentcdodds.com/blog/inversion-of-control)

Implement Inversion of Control

A great way to learn how hooks work is to try and implement them yourself. In this video we'll learn about both of the `useState` and `useReducer` hooks by reimplementing `useState` with `useReducer`.

This is based on my blog post: ["How to implement useState with useReducer"](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)

Implement useState with useReducer

In this lesson we'll learn how to write Vanilla JavaScript (JavaScript that's free of libraries and tools) to write and load ES Modules (EcmaScript Modules, like `import` and `export` syntax) directly in the browser.

This is based on my blog post: [Super Simple Start to ESModules in the Browser](https://kentcdodds.com/blog/super-simple-start-to-es-modules-in-the-browser)

Use JavaScript Modules in the browser

Use cases for `useImperativeHandle` are few and far between, but if you're testing a component that uses this React hook, you need to wrap any function you expose which results in state updates when called in React's `act` utility. Otherwise you could be missing important things in your tests that could result in bugs shipped to production.

In this lesson we'll learn how to identify what needs to be wrapped in `act(...)` and how to wrap those interactions.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning when testing the useImperativeHandle Hook

There aren't many places you need to manually use `act` if you're using [React Testing Library's async utilities](https://testing-library.com/docs/dom-testing-library/api-async), but if you're using fake timers, you need to manually use `act` to avoid missing bugs in your code.

In this lesson you'll learn how to identify the cause of `act` warnings and how to resolve them.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning with Jest fake timers

Any time your test interacts with a React component in a way that results in a state update, you need to make sure you wrap that interaction in an `act` function call, otherwise you'll get the "not wrapped in act(...)" warning.

In this lesson you'll learn how you can use `act` with `@testing-library/react-hooks` to avoid potential bugs in your custom React hooks.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning when testing Custom Hooks

The dreaded `act(...)` warning is really annoying, but actually really important. I've yet to see it be wrong (even when I thought it must be!). Every time it's pointing out something that is important that I'm missing in my test. In this lesson we'll identify a missing piece to our test and use act to make sure we avoid that in the future.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning

If you find yourself filling out the same form over and over again, or working through a weird workflow to enable certain features in your app just to get things developed, then custom DevTools for your app will enhance your productivity. There are so many things you can do once you are enabled to write arbitrary development-only code in your app. In this lesson we'll see how we can wire that up to make it possible.

This is based on my blog post: [Make your own DevTools](https://kentcdodds.com/blog/make-your-own-dev-tools)

Create App DevTools to enhance development productivity

If you're not careful you can write a test that's worse than having not tests at all. In this lesson we'll learn why that is and how you can avoid it by making sure your test can fail.

This is based on my blog post: [Make Your Test Fail](https://kentcdodds.com/blog/make-your-test-fail)

Make Your Test Fail

Almost every UI app I've seen has an `isLoading` boolean somewhere in the code. And if it's not that, it's some variation of a boolean that's intended to represent some state. Unfortunately, very often this leads to states that exist in the real world that are unrepresentable in the code, or states in the code that are impossible in the real world. In either case, you've got yourself a bug.

From this lesson you'll learn how to avoid this by using a `status` enum instead of an `isLoading` boolean in a React custom hook for retrieving the user's position via [the geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API).

This is based on my blog post: [Stop using isLoading booleans](https://kentcdodds.com/blog/stop-using-isloading-booleans).

Use a status enum instead of booleans

`useReducer` is definitely more powerful than `useState` (you can even [implement `useState` using `useReducer`](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)), but there's one scenario where `useState` is almost certainly better than `useReducer`:

> When it's just an independent element of state you're managing: `useState`

This is based on my blog post: [Should I useState or useReducer?](https://kentcdodds.com/blog/should-i-usestate-or-usereducer)

And don't miss [When to useReducer instead of useState](https://egghead.io/lessons/egghead-when-to-usereducer-instead-of-usestate?pl=kent-s-blog-posts-as-screencasts-eefa540c&af=5236ad)

When to useState instead of useReducer

`useState` is typically simpler at first than `useReducer` (you can even [implement `useState` using `useReducer`](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)), but there's one scenario where `useReducer` is almost certainly better than `useState`:

> When one element of your state relies on the value of another element of your state in order to update: `useReducer`

This is based on my blog post: [Should I useState or useReducer?](https://kentcdodds.com/blog/should-i-usestate-or-usereducer)

And don't miss [When to useState instead of useReducer](https://egghead.io/lessons/react-when-to-usestate-instead-of-usereducer?pl=kent-s-blog-posts-as-screencasts-eefa540c&af=5236ad)

Kent's Blog Posts as Screencasts

Instructor

Course content (19 lessons)

Instructor