uim

use-is-mounted-ref

📦 useIsMountedRef is a React Hook to check when the component is mounted.

Showing:

Popularity

Downloads/wk

336

GitHub Stars

37

Maintenance

Last Commit

2d ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

📦 use-is-mounted-ref

useIsMountedRef is a React Hook to check when the component is mounted.

build version MIT License downloads


Table of Contents

Motivation

  • Avoid memory leaks setting states when component are unmounted;
  • Control when component already mounted;
  • Common error when setting state to unmounted component:
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Usage

To start using the use-is-mounted-ref in your project, first install in your project:

yarn add use-is-mounted-ref or npm install use-is-mounted-ref

Avoid set state when unmounted component:
import { useState, useEffect } from 'react';
import useIsMountedRef from 'use-is-mounted-ref';

function App() {
  const isMountedRef = useIsMountedRef();

  const initialState = {
    loading: false,
    error: false,
    data: [],
  };

  const [state, setState] = useState(initialState);

  useEffect(() => {
    fetch('https://www.reddit.com/.json')
      .then((response) => response.json())
      .then(({ data }) => {
        if (isMountedRef.current) {
          setState((prevState) => {
            return {
              ...prevState,
              loading: false,
              data,
            };
          });
        }
      })
      .catch((err) => {
        if (isMountedRef.current) {
          setState((prevState) => {
            return { ...prevState, loading: false, error: true };
          });
        }
      });
  }, []);

  return state.loading ? 'Loading...' : 'Found Data!';
}

export default App;

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Bugs and Sugestions

Report bugs or do suggestions using the issues.

License

MIT License © helderburato

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100