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?

React API provides two hooks to provide the memoization feature for expensive calculations. The following two hooks will be discussed in this lesson:

* `useCallback `
* `useMemo`

> Memoization is an optimization technique to store the result of an expensive calculation for a given input. The cached result is returned for the subsequent function calls as long as the same input occurs again.

Both `useCallback` and `useMemo` provide similar functionality but with one main difference mentioned below:

* Use the `useCallback` hook when wanting to memoize the _callback_ function. This _callback_ may perform several actions when invoked.

* Use `useMemo` hook when wanting to memoize **output** returned from an expensive _compute_ function. This _compute_ function may perform heavy calculations on each function call.

# When do we use it?

Use memoization hooks only when there are benefits in terms of rendering performance. For example, when rendering large lists, a memoized result may speed up the actual rendering performance. 

For simple cases, it is not required to use memoization because the overhead may not offset the performance improvement.

# Syntax

`useCallback` hook accepts two arguments: An inline callback function and an array of dependencies. `useCallback` returns a memoized reference to the callback function when the dependencies do not change.

```
const memoizedCallback = useCallback(
  () => {
    calculateFn(input);
  },
  [input],
);
```

Similarly, `useMemo` hook accepts two arguments: A callback that returns the result of an expensive compute function and an array of dependencies. `useMemo` returns the last cached result if the dependencies do not change.

```
const memoizedValue = useMemo(() => getExpensiveCalculationResult(input), [input]);
```


Learn about ”memoization” hooks provided by React Hooks API. This lesson will cover the “useCallback” hook and “useMemo” hook examples.

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

Memoization Hooks

What is it?