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

React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

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

**NOTE:** React Suspense for data fetching is VERY ALPHA and this API is undocumented, unsupported, and will likely change.

Our `Counter` component has grown in complexity and we need to figure out how to get it tested. In this lesson, we'll learn how to test the effects that are generated with `useEffect`.
 
**We'll cover:**
- How React schedules callbacks after the component renders
- Keeping our tests isolated with `afterEach`



Test Effects Generated from React the 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

If the user hasn't used your application for a few minutes, you may want to log them out of the application automatically in case they've stepped away from the machine and someone nefarious attempts to use their session. Let's checkout how you can create a custom React hook that wraps a regular npm module called [`activity-detector`](https://www.npmjs.com/package/activity-detector) to solve this problem.

Detect user activity with a custom useIdle React Hook

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

React Hooks and Suspense

Kent C. Dodds

Course Content