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


# Getting started

In the previous lesson, two functions were identified as needed as part of the Notify hook.

* A function to show the notification message, called `notifyUser`.
* A function to hide the notification message, called `clearNotification`.

Since we are automatically hiding the message after three seconds, `clearNotification` can be handled internally and does not need to be exposed outside the hook. Simply, return the `notifyUser` function as the output of the Notify hook.

Later, a component can _use_ Notify hook like this: 

```
const MyComponent = () => {
  const { notifyUser } = useNotifyHook();
  // some code here
}
```

# Skeleton implementation


As mentioned previously, the logic to clear the notification message can be handled within the Notify hook. Use `setTimeout` to achieve it after waiting 3 seconds.

The `notifyUser` function is going to accept two arguments:

* The `message` to be displayed.
* A boolean for `isError` to be used later for error styling.

Here is the basic structure for the Notify hook.

```javascript
const NOTIFY_TIME = 3000; // ms

export const useNotifyHook = () => {
  const clearNotification = () => {
    setTimeout(() => {
      // TODO: Dispatch action to clear notification message
    }, NOTIFY_TIME);
  };

  const notifyUser = (message, isError = false) => {
    // TODO: Dispatch action to enable notification message
    clearNotification();
  };

  return { notifyUser };
};
```

The sample usage will look like the example above. The `useNotifyHook` hook call will return the `notifyUser` function. When a user clicks the button, `notifyUser` is used to show a notification message. 

```javascript
const MyComponent = () => {
  const { notifyUser } = useNotifyHook();
  
  const handleClick = () => {
    notifyUser('React Hooks are amazing!')
  };
  
  return (
    <button onClick={handleClick }>Click here</button>
  );
};
```



Explore the implementation and complete the code for creating your first custom Notify 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

Coding for Notify Hook

Getting started