 Resources from Kent C. Dodds in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Our `<Query />` component is a render prop based component that the `<User />` component uses. But because it doesn't render anything, we can actually just change it to a custom hook. Let's create a `useQuery` hook that returns the state from the hooks the Query component uses and use that instead. But we'll preserve the component so we don't have to refactor everywhere that uses the Query render prop based component as well and we can keep our tests passing as they are.

Refactor a render Prop Component to a Custom React Hook

Let's refactor our `GitHubClientProvider` class component to a function component that uses hooks. This one's pretty interesting because we can use `useEffect` to encapsulate everything we need for a single effect, truly separating that concern within our component.

Handle componentDidMount and componentWillUnmount in React Component Refactor to Hooks

With React 16.6.0, React Suspense was officially released as a stable feature (with limited support for `React.lazy`). Let's refactor our lazily-loaded components that are using [`react-loadable`](https://github.com/jamiebuilds/react-loadable) to components that use the built-in `React.lazy` feature.

Dynamically Import React Components with React.lazy and Suspense

While users are filling out the form on our home page, it would be a good idea to pre-load the next page they will be going to so they don't have to wait for it to load once they've finished filling out the form. React's `useEffect` hook makes this really easy.

Preload React Components with the useEffect Hook

React's new hooks feature allows you to use state in function components in a really simple and elegant way. Let's look at a very basic example of a `<Counter />` component that uses the `useState` React hook.

Use the useState React Hook

Testing our `<Counter />` React Component that uses the `useState` hook is actually very straightforward with [`react-testing-library`](https://github.com/kentcdodds/react-testing-library). Let's give it a whirl!

Test React Components that use React Hooks

In React 16.6, there are hooks that allow you to use state in functions components in a simple way.

With these hooks, you can share the logic easily. In this lesson, we'll break out the `setCount` hook into it's own function and use it in a Component.

Share Logic Across Multiple React Components with Custom Hooks

When you refresh the page in JavaScript, it will clear values that you possibly want to be persisted if you don't store it somewhere as in localStorage.

Storing something in localStorage is a side effect and in React 16.6 you can utilize `useEffect` to deal with exactly this type of situation. In this lesson, we'll use `useEffect` to set a state variable in `state` whenever `state` is updated.

We'll also look at some optimizations available to us with `useEffect` so we don't have it running _every_ time the component renders.


Store Values in localStorage with the React useEffect Hook

To use `VanillaTilt` we need to get access to a `div` so that it can work its magic. 
To make this happen we'll learn about React's `useRef` and `useEffect` methods. 

**We'll cover:**

- Creating a reference to a DOM node with `useRef` 
- Making a callback function using `useEffect`
- Using `.init` to assign `VanillaTilt` to that DOM node
- Returning a cleanup function to avoid memory leaks
- Initializing `useEffect` with a dependency list to prevent rerendering. 

Access and Modify a DOM Node with the React useRef and useEffect Hooks

In this lesson, we'll create a `Stopwatch` component that will store the current time in its state. We will then have the DOM display the current time as the state is updated.

**We'll cover:**

- React's `useState` hook 
- Setting a reference to an `interval` using React's `useRef`
- Creating a `handleRunClick` function that handles flipping the `running` state plus creating and clearing an `interval`
- Using the `useEffect` hook to clear the `interval` when the component unmounts

Interact and Update State in React with useState

Having to use `useState` for every item in your state quickly gets cumbersome. In this lesson, we’ll learn how to refactor our component to use `useReducer` instead. 

**We'll cover:**

- Creating an initial state with `useReducer` 
- Making a `reducer` function that makes changes to the state based on incoming dispatches

Declaratively Interact with Complex Component State using the React useReducer Hook

Having a `reducer` is great for complex components but for our simple `Stopwatch` it’s a layer of abstraction that might not be necessary. 

**We'll cover:**

- Converting your `reducer` into a function that shallow merges the new state into the old
- Refactoring your `dispatch` function into `setState` 

Simplify a Component Reducer with the React setState Hook

A lot of the time, when you define logic in a component, you will want to reuse it in a few different places within your application as separate instances.

In this lesson, we will break out the logic of our `StopWatch` Component and use two instances within our stopwatch and compare the difference between the two `lapse` instances.

**You'll learn:**
- Create a function as a custom hook for your components
- Create multiple instances of the logic within a component
- Compare the values between the two instances.

Share Complex Logic across React Components with Custom Hooks

You only want to re-render components when the data for that component has changed. Often times you'll find that multiple instances of a component will re-render when the props change for one of them.

With `React.memo`, you can now pass a stateless functional component to it and it will ensure that it does not rerender unless the props given to the component changes. In this lesson, you'll learn how to implement this with your stateless functional components.

**NOTE:** This does not work for Class based React Components, use `PureComponent` or `shouldComponentUpdate`.

Prevent Unnecessary Component Rerenders with React memo

When you load an application, you don't want to load _every_ component to the browser all at once. This can take forever to load, especially over a slow network.

With `React.lazy`, you can now code split your components and only load them when they are needed. Once a component is loaded, it will stay loaded within the application.

In this lesson, you will:
  - Lazy Load a component with React.lazy
  - Render that component with `Suspense`
  - Provide a fallback to `Suspense` that will render while the lazy loaded component is loading

Lazy Load a React Component with React.lazy and Suspense

Many components in your application will need data that has to be fetched over the network. When that data is loaded, however, you don't want to make a network request because you have the data stored in cache in the browser.

In this lesson, you will learn
 - throw a `Promise`
 - catch that `Promise` with `Suspense`
 - render that data to the browser after its loaded
 - add that data to cache

Learn fundamentals of React Suspense

**NOTE:** The `react-cache` API is not stable and has changed. Check [this issue](https://github.com/facebook/react/issues/14780) for more details.

Many components in your application will need data that has to be fetched over the network. When that data is loaded, however, you don't want to make a network request because you have the data stored in cache in the browser.

React gives us an API to handle cache for us. We can use `createCache` and `createResource` to set data in the cache after fetching over the network.



Optimize Suspense HTTP requests with createResource from react-cache

Thanks to [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) our tests are free of implementation details, so when we refactor components to hooks we generally don't need to make any changes to our tests. However, `useEffect` is slightly different from `componentDidMount` in that it's actually executed asynchronously _after_ the render has taken place. So all of our query tests which relied on the HTTP requests being sent immediately after render are failing. Let's use the `flushEffects` utility from `react-testing-library` to ensure that the pending effect callbacks are run before we make assertions.

Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library

It would be nice if `useEffect` did the deep value comparison for us. Why don't we make our own custom hook that does that for us? In this lesson we'll create a `useDeepCompareEffect` which will allow us to use it just like a `useEffect` and allow us to just pass the inputs.

Deeply Compare Inputs in a Custom React Hook for useEffect

Let's get a quick overview of what this course is all about and how it's been structured to make sure you're as productive as possible with these new features.

Topics

Instructors

Content Type