JSPM – is-mounted-hook@1.2.0

Package Exports

is-mounted-hook
is-mounted-hook/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (is-mounted-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

is-mounted-hook

React hook for checking if the component is mounted.

Author

name: Martik Avagyan
email: martikavagyan1@gmail.com
github: m-avagyan

Getting started

Installation

npm install is-mounted-hook or yarn add is-mounted-hook

Example

import React, { useState, useEffect } from 'react';
import useIsMounted from 'is-mounted-hook';

import { getCars } from '../../services/cars';

import Loader from '../loader/Loader';
import Error from '../error/Error';
import CarList from '../car-list/CarList';

function Example() {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');
  const [data, setData] = useState(null);

  const isMounted = useIsMounted();

  useEffect(() => {
    getCars()
      .catch((error) => setError(error.message))
      .then((data) => {
        if (!isMounted.current) {
          return;
        }

        setData(data);
      })
      .finally(() => setIsLoading(false));
  }, []);

  return isLoading ? (
    <Loader />
  ) : error ? (
    <Error message={error} />
  ) : (
    <CarList data={data} />
  );
}

export default Example;