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

# Using the dependencies array to update components

The previous example demonstrated how to use the `useEffect` hook to create logic based on changes in props or state.

Let's explore this in more detail.

Assume you have several decoupled React components including:

* Global state to hold profile data
* Header to fetch greeting message from API
* Some forms to update profile

As seen above, `useEffect` is handy when the user changes the name through one of the forms and the global state is updated. `Header` will simply fetch the new message when the name changes.

The following snippet shows the same:

```javascript
import React, { useEffect, useState } from 'react';

const Header = ({ name }) => {
  // Name is a prop or external dependency
  const [message, setMessage] = useState('');

  useEffect(() => {
    loadMessage(name);
  }, [name]);

  const loadMessage = nickName => {
    // fetch and set message
  };

  return (
    <h1>{message}</h1>
  );
};
```

Each time `name` is updated, the `useEffect` function will run and load the new message. 

Learn more benefits of using the dependencies array for creating decoupled React components. This lesson will also explore the details for managing local functions with the “useEffect” hook.

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

Dependencies Array Usage for Components and Functions

Using the dependencies array to update components