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?
The `useEffect` hook provides a way to manage side effects in a React functional component. Think of the `useEffect` hook as a partial replacement for React lifecycle events. With the `useEffect` hook, it is possible to replicate behavior for `componentDidMount`, `componentDidUpdate` and `componentWillUnmount` methods.

In other words, you can react upon changes happening in a component that is using the `useEffect` hook. How great is that 🎉?

# When do we use it?

Some common scenarios to use the `useEffect` hook with are mentioned below:

* Add an event listener for a button
* Fetch data from API when component mounts
* Perform an action when state or props change
* Clean up event listeners when the component unmounts

In short, the above-mentioned lifecycle methods can be replaced with the  `useEffect` hook.

# Syntax

`useEffect` hook takes the two arguments mentioned below:

1. It accepts the first argument as a callback function. By default, this function will run after every render but this depends upon the value of the second argument.
2. The second argument is an optional dependencies array. `useEffect` hook checks this array to compare the previous and current value for those dependencies and then it runs the callback function but only if one of the dependencies has changed. 


```javascript
 useEffect(() => {
    // some code
  }, [someProp, someState]);
```

The role of dependencies array will be explored in great detail in the next chapter called [Advanced: Deep Dive into useEffect Hook](https://www.educative.io/courses/a-deep-dive-into-react-hooks/using-dependencies-array-with-useeffect-hook). For the purpose of this lesson, an empty array for dependencies will be used.

Learn how the “useEffect” hook replaces traditional lifecycle methods in React. This lesson will go through its use case, syntax, and usage. Later in the chapter, practice exercises are provided.

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

useEffect Hook

What is it?

When do we use it?