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

# Building blocks for global state using Hooks

Discover what is needed to build the global state solution using `useReducer` and `useContext`:

- Initial State
- A reducer function
- Global state object and the dispatch function
- A Store Context with Provider


## Initial State

The initial state can simply be defined as a JavaScript object. An example is shown below. A global state with the `profile` object, a `greeting` string, and a `content` array is provided.

```
const initialState = {
  profile: null,
  greeting: '',
  content: []
};
```

## Reducer Function

A skeleton is shown below for a reducer that supports two action types: `REFRESH_GREETING` and `REFRESH_PROFILE`. Use this reducer with the `useReducer` hook.

```
const reducer = (state, action) => {
  switch (action.type) {
    case 'REFRESH_GREETING':
      // return updated state
    case 'REFRESH_PROFILE':
      return {
        // return updated state
      };
    default:
      return state;
  }
};
```

## Global State object and Dispatch function

Using global state object and the dispatch function is as simple as calling `useReducer` with `reducer` and `initialState`.

```
const [globalState, dispatch] = useReducer(reducer, initialState);
```

## A Store Context with Provider

Finally, you will need a Store. Define it as a context object so it can be accessed from any component.

An implementation that combines previous blocks using `StoreContext` is shown below. Create `StoreContext` by using the `React.createContext`. As seen earlier, you can use the `useContext` hook to access the value of the `StoreContext` object. In this case, the value will be set to an array containing `globalState` and `dispatch`. 

```
export const StoreContext = React.createContext([]);

const App = () => {
  const [globalState, dispatch] = useReducer(reducer, initialState);
  return (
    <StoreContext.Provider value={[globalState, dispatch]}>
      {/* JSX to follow */}
    </StoreContext.Provider>
  );
};

```



Explore some coding for a basic global state solution with React Hooks.


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

Coding for Global State

Building blocks for global state using Hooks