Gain insights into using React Hooks to enhance code composition and reuse. Delve into custom hooks, global state management, unit testing, and the useDependency Pattern for enterprise-level coding.

prettyeslint.tar.gz

Jest

Jest only

Jest only-copy

Jest-copy

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

You’ll start by reviewing what React Hooks are all about and why we need them. This will set the stage for the rest of the course. After that you will dive into the Hooks API, how to manage application state globally, as well as how to create custom hooks.

In the second half, you’ll get into unit testing and how to work with the popular useDependency Pattern. By the end of this course, you’ll have the confidence to write enterprise-level React Hooks code.

A Deep Dive into React Hooks

The following sequence diagram depicts data flow for a component using the `useDependency` pattern.

Here the `User` component can request and receive the prop as needed for rendering. Also, all of the functionality to retrieve data from the API is the responsibility of a custom hook. It makes it possible to reuse such code in other components too.

Title: Data Flow
App->User: Component Mounts
User->useDependency Hook: Request prop
useDependency Hook->API: Make an API Request
API->useDependency Hook: Receive API Response
useDependency Hook->useDependency Hook: Update state
useDependency Hook->User: Push prop
User->User: Re-render

Next, decide the shape of data for `useDependency` and how to integrate it in an existing application.

The following concepts are introduced for designing the `useDependency` hook: 

- Dependency Provider
- Configuration object for Dependency Provider
- Resolver functions for the `useDependency` hook

# Dependency Provider

The purpose of the Dependency Provider is to share the configuration in an entire application by using the `useContext` hook. This will allow you to know how to process a hook call when a component (e.g. `user`) requests certain content.

```
const DependencyProviderContext = React.createContext({});

const DependencyProvider = ({ config }) => {
  return (
    <DependencyProviderContext.Provider value={config}>
      {/* render component */}
    </DependencyProviderContext.Provider>
  );
};
```


# Configuration object for Dependency Provider

The configuration object provides two keys in it:

- `options` object
- `dependencies` array

```
const config = { options: {}, dependencies: [] };
```

The `options` object can have common settings such as what Store to use or whether to use caching or not.

The `dependencies` array basically registers the content types and the associated settings. In the most simple form, it will look like this:

```
[{ content: 'user' }]
```

# Resolver functions for `useDependency` hook

The resolver is simply a function to retrieve the data by using a given strategy. In your basic design, your strategy is to always fetch data from an API. The `useDependency` hook will use a _resolve function_ to retrieve the data as requested. A skeleton for such a resolver will look like this:

```
const getDataFromApi = async () => {
  try {
    // Fetch and return response
  } catch (error) {
    // return an error
  }
};
```


In the next lesson, write code to implement the above-mentioned building blocks.

Explore the flow diagram and basic design for “useDependency” hook pattern.

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

Basic Design for useDependency Pattern