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

# What is it?

`useReducer` hook is an alternative to `useState`. It offers more control on the next state value based on a given action.

If you are familiar with Redux Reducers, `useReducer` hook provides similar functionality out of the box in React.

# When do we use it?

`useReducer` can be used in the following scenarios:

* The shape of state object is complex. Maintain multiple items within the same state object.
* Access previous state value to update the next state.
* Apply special logic on certain actions to calculate the next state.


Note that some of these points can be achieved by using `useState` hook. However, it would require maintaining more code in the shape of various functions. In the upcoming section,  [Managing Global State with Hooks](https://www.educative.io/courses/a-deep-dive-into-react-hooks/introduction-RLBzoJ2QMAL), the benefits of the `useReducer` hook and how it can help maintain large state objects in a cleaner way is explained in detail.


# Syntax

The `useReducer` hook accepts three arguments:

* **Reducer**: This is the reducer function. When an action is dispatched, it is called with the current state and the action as first and second argument respectively.
* **Initial State**: Supply the value of the initial state here.
* **Init Callback**: This parameter is optional. You should only supply it when looking to initialize a state which is based on a custom value or prop at a later stage. When provided, React will call this function as `initCb(initialState)` to obtain the initial state for the `useReducer` hook.

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

It returns an array with state value and `dispatch` function. 

The `dispatch` function is similar to the `setState` function seen in `useState` hook. However, it is a special use case function. When `dispatch` is called, React will automatically call the reducer with the action provided to the `dispatch` function.

By using 
```
dispatch({ type: 'REFRESH', message: 'hello' })
```
It will result in this:

```
reducer(state, { type: 'REFRESH', message: 'hello' })
```


Learn how the “useReducer” hook helps manage state with React Hooks. The lesson will also cover  use cases and example usage.

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

React Hook with Reducer Pattern

What is it?

When do we use it?