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