This module will teach you about React Hooks and its advance concepts such as useDependency Pattern.

React Development for Professionals

In this module, you will learn how to use React Hooks as opposed to class components, which will help you achieve better code composition, code reuse, and unit testing.

We will start by reviewing what React Hooks are and why we need them. Then we will dive into the Hooks API, how to manage application state globally, and how to create custom hooks. In the second half, we will get into unit testing and how to work with the popular useDependency Pattern. By the end of this module, you will have the confidence to write enterprise-level React Hooks code.

A Deep Dive into React Hooks


## useRef Hook

You can use `useRef` hook to get the ref of a DOM node. Later, you can use this ref for certain actions related to that node. For example, scrolling to an element position.

Other use cases may require getting the height of a DOM node or focusing an input.

`useRef` provides the ref object with the `current` property set to the reference of node in DOM. 

The following example demonstrates `useRef` hook usage. On line #4, this hook is called to get the initial ref object. Later, set the ref property on a `div` to this object on line #11. 

`Go to top` button triggers `handleClick` event handler. `handleClick` function simply scrolls the page to the position of the `div` with text `Top section`. You can see here that the `topSection.current`  property is used to get access to the DOM node.


# useRef Hook

You can use `useRef` hook to get the ref of a DOM node. Later, you can use this ref for certain actions related to that node. For example, scrolling to an element position.

Other use cases may require getting the height of a DOM node or focusing an input.

`useRef` provides the ref object with the `current` property set to the reference of node in DOM. 

The following example demonstrates `useRef` hook usage. On line #4, this hook is called to get the initial ref object. Later, set the ref property on a `div` to this object on line #11. 

`Go to top` button triggers `handleClick` event handler. `handleClick` function simply scrolls the page to the position of the `div` with text `Top section`. You can see here that the `topSection.current`  property is used to get access to the DOM node.

Some hooks like “useLayoutEffect” may be required in special cases. It is also not commonly used. This lesson will detail both “useRef” and “useLayoutEffect” hooks.

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

Less Common Hooks

useRef Hook