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

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

Many engineers working with redux have felt burdened by large amounts of boilerplate code and confusing indirection. These apps often rely on legacy patterns that are no longer recommended, but are still commonly found in production code bases. If you are are an engineer working on such an application, this course is for you. In it I will show you how to modernize your application, with react hooks, one component at a time. At the end of it, we'll still be using redux, but the structure and content of your code will be significantly improved.

We will cover migrating class components to functional components with [react hooks](https://reactjs.org/docs/hooks-reference.html) and how to replace `connect()` with [redux hooks](https://react-redux.js.org/api/hooks). This course will serve as a good tutorial for learning react hooks. It will also help you apply  modern patterns for using redux. These patterns, powered by the new [useSelector](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hooks will transform your redux applications for the better.

Maggie Appleton

This lesson begins by demonstrating how to download and setup the sample application we'll be using in this course:

```
git clone https://github.com/xjamundx/exchange-rate.git;
cd exchange-rate;
git checkout redux-legacy;
yarn;
yarn start;
```

With that complete I go through the functionality of the application including its 3 main components:
- Currency Code Picker
- Amount Field
- Rate Table

All of the code we will be working on in this course can be found here:
https://github.com/xjamundx/exchange-rate/tree/redux-legacy

Setup the Currency Conversion Calculator

In this lesson I walk through each file in the application to demonstrate how it's all setup.

This app uses [create-react-app](https://create-react-app.dev/) and there is organized in a fairly common way.

We have a `components/` folders for our React components and all of the redux logic including `actions` and `reducers` live inside of a ` store/` folder.


Each component in our application has one or both of [mapStateToProps](https://react-redux.js.org/api/connect#mapstatetoprops-state-ownprops--object) and [mapToDispatchToProps](https://react-redux.js.org/api/connect#mapdispatchtoprops-object--dispatch-ownprops--object) as well as both a react class component and [redux connected](https://react-redux.js.org/api/connect#connect-parameters) component which we call a "container" component.

We also cover how we get our exchange rate data using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [exchangeratesapi.io](https://exchangeratesapi.io/).

**Note:** This lesson is definitely optional if you're already confident in how a redux app is setup.


Currency Conversion Calculator File Overview

In this lesson we convert the class-based `CurrencyCodePicker` component to a function component. To do so we employ the following strategy:

1. Change the `class` keyword to `function` and remove the `extends React.Component` part
2. Place the contents of the `render()` method in the function body
3. Convert all other methods on the class to stand-alone functions
4. Remove the constructor function
5. Inline any props into the function declaration using object destructuring
6. Get rid of any use of `this.` to reference methods or variables
7. Leave the redux boilerplate like `connect()` as-is (for now)

After applying this technique we can see that we've successfully converted the CurrencyCodePicker from a class-based React component to a function component and the application should continue working as it did before.

This lesson does not use (or even reference hooks) and is meant to demonstrate the simplest case of migrating from a `class` to a `function` component. It's also interesting to note that `connect()` continues to work fine on function components. We didn't need to touch any of the redux code.

Migrate a React Class Component to a Function Component

In this lesson we convert our AmountField class component to a function component and then convert its state from `this.state`/`this.setState` to the [useState](https://reactjs.org/docs/hooks-state.html) hook.

As in our earlier lesson we apply the following technique for migrating a class component to a function component:

1. Change the `class` keyword to `function` and remove the `extends React.Component` part
2. Place the contents of the `render()` method in the function body
3. Convert all other methods on the class to stand-alone functions
4. Remove the constructor function
5. Inline any props into the function declaration using object destructuring
6. Get rid of any use of `this.` to reference methods or variables

The useState hook itself has an interesting API where it returns an array with two important properties: a value and a setter.

```
const [value, setValue] = useState(defaultValue);
```

Any time `setValue` is called our component gets  re-rendered.

Unlike the `setState` API our value setter only takes a single argument, the new value.

Our example here only showed a single state value, but you can call `useState` as many times as you need a component. 



Migrate React Component State to the useState Hook

Our class-based component relies on instance variables to ensure it's only created once.

```
this.amountChanged = debounce(this.props.changeAmount, 500);
```

Functional components aren't classes and therefore don't have instance variables. Because of that it might seem like a good idea to write your component like this:

```
// BAD EXAMPLE
const onAmountChanged = debounce(changeAmount, 500);
```

This has the problem of executing the `debounce` function on each render, creating many new `onAmountChanged` functions. Instead we're going to use the `useMemo` hook, which will only execute the debounce method when the dependencies change, which in this case is just on first render.

```
const onAmountChanged = useMemo(() => debounce(changeAmount, 500), []);
```

Lastly we note the warning that we did not include a dependency in our method. This is a friendly lint warning that in practice doesn't always need to be heeded. However we end up adding the `changeAmount` prop to our dependencies array, just in case the prop ends up changing, so we get an updated `onAmountChanged` varible. 

Our final debounced method ends up looking like this:

```
const onAmountChanged = useMemo(() => debounce(changeAmount, 500), [changeAmount]);
```

---

The "memo" in `useMemo` is short for memoization. Memoization is a programming technique for making code more efficient by remembering past values. You can learn more about it here:
https://reactjs.org/docs/hooks-reference.html#usememo

Create a Debounced Event Handler with the useMemo Hook

In this lesson we replace `React.createRef()` with the `React.useRef` hook. The API is almost identical, so the there's not much to it, if you're already familiar with refs. 

In React, refs provide a way to store references to native DOM elements. Throughout React's evolution there have been several variations on the pattern including [callback refs](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) and [string refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs). With functional components you'll only want to be using the `useRef()` hook to create your refs.

One other thing to note about refs is that you can only pass them in to *class components* and *built-in components* (such as `<div>`). If you need to pass a `ref` into a function components check out the [forwardRef](https://reactjs.org/docs/forwarding-refs.html#gatsby-focus-wrapper) API.

---

**Callback Refs**

This lesson does not cover callback refs, but if you have one like this one and you wanted to migrate it to `useRef()`
```
class MyComponent extends React.Component {
   render() {
      return (
        <input type="text" ref={el => this.inputRef = el} />
      )
   }
}
```

It would look like this:

```
function MyComponent() {
   const inputRef = useRef();
   return <input type="text" ref={inputRef} />
}
```


Migrating DOM refs from createRef() to useRef()

In addition to storing DOM references, the [useRef](https://reactjs.org/docs/hooks-reference.html#usecallback) hook can be used to store values without re-rendering the component. 

If you have a class component that stores and manipulates values using instance variables like this:

```
class YourComponent extends React.Component {
  constructor() {
    this.count = 0;
  }
  onClick(e) {
    this.count++;
  }
  // ...
}
```

You can simulate this behavior with the `useRef` hook:

```
function YourComponent() {
  const countRef = useRef(0);
  function onClick() {
    countRef.current++;   
  }
  // ...
}
```

In both cases, when the `onClick` handler is called and either `this.count` or `countRef.current` are updated, the component will not re-render.

This can be useful when needing a way to keep track of values for logging or other purposes that don't involve rendering data to the screen.

Replacing Instance Variables with the useRef Hook

The [useEffect](https://reactjs.org/docs/hooks-effect.html) hook provides a way for components to declaratively state side effects that need to be run. By modifying the dependency array you can simulate certain React lifecycle methods such as `constructor`/`componentDidMount` and `componentDidUpdate` and `componentWillUnmount`. The `useEffect` hook is always called after the first render of your component and then any time its dependencies change.

### Examples

```
componentDidMount() {
    fetchData();
}
```

Is functionally equivalent to:

```
useEffect(() => {
   fetchData();
}, [])
```

Likewise this common approach:

```
componentDidUpdate(prevProps) {
   if (this.props.someProp !== prevProps.someProp) {
     handleChange();
   }
}
```

Can be replaced with the following hook:

```
useEffect(() => {
  handleChange();
}, [someProp);
```

---

There is also a cleanup phase that happens with hooks. If you return a function inside of a hook it will be executed just before the function is unmounted. This is similar to the `componentWillUnmount` hook and is explained in detail here:
https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup


Replacing Component Lifecycle Methods with the useEffect Hook

Redux provides a [useSelector](https://react-redux.js.org/api/hooks#useselector) hook for easy access to state within a function component. This hook replaces the `mapStateToProps` function which was used previously with `connect()`. The hooks API is a lot simpler and can be combined nicely with selector functions.


The basic API looks like this:
```
const value = useSelector(state => state.reducerName.value)
```

When used with a selector function it looks like this:
```
const value = useSelector(getValue)
```

Replacing mapStateToProps with the useSelector Hook

Redux provides a [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hook to make it easy to dispatch actions within a function component. This hook replaces the `mapDispatchToProps` function which was used previously with `connect()`. 


The basic API looks like this:
```
const dispatch = useDispatch();
```

Within a component you can choose to use `dispatch()` directly, within an event handler for example, or create a function to that dispatches the action and reference that. This lesson shows both options.

Replacing mapDispatchToProps with the useDispatch Hook

In this lesson we quickly migrate our `<RateTable>` and `<CurrencyCodePicker>` to the Redux Hooks API. Nothing new is covered here that isn't covered in our previous lessons, but I am hoping it will be useful to practice this technique and also to see how rapidly we can convert these components to the new syntax.

What's stopping you from using these techniques in your own app!?


1. `import useSelector` and `useDispatch`
2. Copy the body of `mapStateToProps` to the top of your component and convert each line to its own variable, pulled in with `useSelector` hook
3. If needed, create a `dispatch` function with `useDispatch()`
4. Replace any dispatched actions with either a direct call to `dispatch` or create a function with the same name as the variable.
5. Remove any now un-needed props
6. Delete propTypes, `mapStateToProps` and the `mapDispatchToProps` function
7. You can also remove `connect()` but we saved that for another lesson :D

Applying the useSelector and useDispatch Redux Hooks to Additional Components

With React hooks it's common to write callback functions in our component body. Event handlers are a common example of this. Most of the time they work great, however, when you're passing those event handlers down to a child component or using them as dependencies in another hook such as `useEffect` they can be a little bit tricky. Because the functions are re-created on every single render, the reference to that function changes. And each time it changes when it's used as a prop or a dependency, it will force an update. The [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) hook was created to provide stable references to callback functions to avoid this problem. It's not always needed, but this lesson will show you how to use it when it's needed.

In this lesson we start off by completing the conversion of our `<AmountField>` to using the Redux Hooks API, but in doing so introduce a new problem: our debouncing stops working. It turns out that by defining our dispatched action inline our `useMemo` hook was relying on an unstable function reference. Each time we changed the AmountField, we ended up creating a new debounced function and immediately firing off the call to update our rate table. To solve this problem we wrap our dispatched action function in `useCallback`.

It's important to note that `useCallback` is not needed for every callback function you create and should only be used when there are real performance issues at hand.


Avoiding Accidental Re-Renders with the useCallback Hook

In this lesson we remove the last bit of redux boilerplate we were relying on, the `connect()` method. In doing so we get rid of our "container" components. At this point all of our components are redux-enabled using the hooks API and we no longer need a separation between redux components and non-redux "presentational" components. With the hooks API redux and non-redux components work together seamlessly and this separation is [no longer recommended](https://redux.js.org/style-guide/style-guide#introduction).

At the end I do mention briefly that we still need to rely on the Redux `<Provider>` which is essential telling our redux hooks which store to reference. This is true both for rendering components in an app as well as while we're testing them. Any components relying on these hooks will still need to be wrapped in a `<Provider>`.

Saying Goodbye to the Redux connect() Method and Container Components

In this lesson we take all of the hooks and logic from our `<ExchangeRate>` component and put them into a custom hook called `useCurrencyCodes()`. 

What's the difference between a custom hook and a function we can use to organize our logic? Not much, really. Because custom hooks usually execute other hooks, they cannot be called conditionally (meaning we can't say `if (ready) useCustomHook()`). They must be called in the component's function body or in another custom hook. Redux hooks and React's built-in hooks are both included in our custom hook and work seamlessly together.

Not only is it convenient to organize your logic in custom hooks, it makes them more sharable and testable as well.  I don't recommend putting all of your logic into one large hook, but instead, consider where it would make your component easier to read by combining related hooks and logic into their own function.

For more details about this pattern please check out this article from the React docs:
https://reactjs.org/docs/hooks-custom.html

Modernizing a Legacy Redux Application with React Hooks

Jamund Ferguson

Free Community Resource

Credits

Free Community Resource

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use