React Resource Monitor

When using head management libraries, such as react-helmet, it is possible for React hydration and re-renders to cause resources to be loaded multiple times. This package logs a warning if that happens.

Installation

yarn add react-resource-monitor

Usage

Add the following hook to start monitoring resources:

import { useResourceMonitor } from 'react-resource-monitor';

useResourceMonitor();

Settings

The useResourceMonitor() hook accepts an object with the following settings:

| Option | Description | Default | |----------------|--------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------| | initiatorTypes | An array of initiatorType to check for duplicates. | ['script', 'link', 'css'] | | ignoreQuery | Ignore any query params when checking for duplicate resources. | true | | disable | Disable the warnings (e.g. if process.env.NODE_ENV === 'production'). | false |

Browser Support

This package will not work for IE unless you polyfill PerformanceObserver.

Build setup

# Run tests
yarn run test

# Run linting checks
yarn run lint