Advanced react hooks

Repository with some code examples and notes about advanced react hooks.

Table of Contents

• useRef hook
• useMemo hook
• useCallback hook
• Custom hooks
• Useful links
• Installation/Usage
• Acknowledgments

useRef hook

1. Example 1:

Create DOM reference adding a ref attribute to an element to access it directly in the DOM.

2. Example 2:

Get previous state.

3. Example 3:

Memory leack error fix.

React components that perform state updates and run asynchronous operations can cause memory leak issues if the state is updated after the component is unmounted.

You may encounter the following warning message in React application when working with asynchronous calls:

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

With combination of useRef and useEffect, we could cleanup memory leaks.

useMemo hook

It can be used for performance optimization. Returns a memoized value.
Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed.

This optimization helps to avoid expensive calculations on every render. (use this as a last resource: there are consequences to overusing it so it is better to use it only when there are performance issues)

useCallback hook

It can be used for performance optimization. Returns a memoized callback.
Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

In some ways, it's similar to useMemo, but the big difference is that useMemo returns a memoized value and useCallback returns a memoized callback function.
Both expect a function and an array of dependencies. UseMemo calls the function and returns the result when the dependencies change and use callback returns the function when the dependencies change.

Custom hooks

1. useFetch: To make HTTP requests

2. useLocalStorage: To store items in local storage as well as your state

Useful links

• Hooks API Reference

• Building Your Own Hooks

• An Intro to Advanced React Hooks

Installation/Usage

1. Clone this repo:

git clone https://github.com/rosgas/advanced-react-hooks.git

2. Installation

npm install

3. Then run

After all dependencies have been installed you can run it locally in development mode or you can built out the static assets to deploy them on any webserver.

• Development mode

  After installing all dependencies you can run it on the webpack dev server by running the following command:

  npm start
  

  Open http://localhost:3000 to view it in the browser.

You can learn more in the Create React App documentation.

Acknowledgments

• Traversy Media