This module will teach you about React Hooks and its advance concepts such as useDependency Pattern.

React Development for Professionals

In this module, you will learn how to use React Hooks as opposed to class components, which will help you achieve better code composition, code reuse, and unit testing.

We will start by reviewing what React Hooks are and why we need them. Then we will dive into the Hooks API, how to manage application state globally, and how to create custom hooks. In the second half, we will get into unit testing and how to work with the popular useDependency Pattern. By the end of this module, you will have the confidence to write enterprise-level React Hooks code.

A Deep Dive into React Hooks

## Configuration for dependency object

In the previous lesson, the `content` was the only available option in the dependency object. Now, two new options are added here:

- The `strategy` string tells the hook how to get the requested prop. Valid values can be like `fetch`, `store`, `cache` etc.
- The `store` object can be provided with external `actionCreator` to call after prop fetch is successful.

```
{
    content: 'user',
    strategy: 'fetch',
    store: {
      actionCreator: refreshUser
    }
}
```


## Config options object

The `options` object provides general settings for `useDependency` hook. An addition to `options` is the `store` object. It contains two functions `dispatch` and `getState`.

```
{
  store: {
    dispatch,
    getState: () => globalState
  }
}
```

Both of the above objects can be found in `App.js` in the following exercise.





# Configuration for dependency object

In the previous lesson, the `content` was the only available option in the dependency object. Now, two new options are added here:

- The `strategy` string tells the hook how to get the requested prop. Valid values can be like `fetch`, `store`, `cache` etc.
- The `store` object can be provided with external `actionCreator` to call after prop fetch is successful.

```
{
    content: 'user',
    strategy: 'fetch',
    store: {
      actionCreator: refreshUser
    }
}
```


# Config options object

The `options` object provides general settings for `useDependency` hook. An addition to `options` is the `store` object. It contains two functions `dispatch` and `getState`.

```
{
  store: {
    dispatch,
    getState: () => globalState
  }
}
```

Both of the above objects can be found in `App.js` in the following exercise.





Examine how to enhance the “useDependency” hook to cover more use cases.

Introduction

Getting Started with React Hooks

React Hooks API

Advanced: Deep Dive into useEffect Hook

Managing Global State with Hooks

Create Your Own Hooks

Unit Testing for React Hooks

Advanced: useDependency Pattern with Hooks

Conclusion

Adding More Options to useDependency Hook

Configuration for dependency object