use-react-monitor

React monitor hook

A library that provides a hook for monitoring multipule endpoints with the specific interval. This hook uses fetch and Promise.allSettled to retrive resources and manage interval IDs for the developer.

Installation and usage

The easiest way to use use-react-monitor is to install it from npm.

npm i use-react-monitor

Then use it in your app

import React, { useEffect } from 'react';
import useMonitor from 'use-react-monitor';

const Tester = () => {
    const interval = 3000;
    const {results, status, lastTimes} = useMonitor(
        { urls:['http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users'],
          freshRate: interval});

    return (
        <div>
            {results.map((result, i) =>{
                return (
                    <>
                        <div key={`lastTime-${i}`}>Last updated time: {lastTimes[i]}</div>
                        <div key={`status-${i}`}>Status: {status[i]}</div>
                        <ul key={i}>
                            {result.data.map((r, index) => {
                                return (<li key={index}>{r.id} {r.firstName} {r.lastName}</li>)
                            })}
                        </ul>
                    </>)
            })}
         </div>

    )
}

export default Tester

Also provide the shallowly compare function to support React.memo

import React, {memo} from 'react';
import useMonitor, {monitoredPropsAreEqual} from 'use-react-monitor';

const Tester = () => {
    const interval = 3000;
    const {results, status, lastTimes} = useMonitor(
        { urls:['http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users'],
          freshRate: interval});

    return (
        <>
            {<MemorizedResults results = {results} status = {status}/>}
        </>
    )
}

const Results = ({ results, status}) => {
    const refCount = React.useRef(0);
    refCount.current++;
    return (
        <div>
        <p>
       {`render time: ${refCount.current}`}
        </p>
        {results && results.map((result, i) =>{
            return (
                <>
                    <div key={`status-${i}`}>Status: {status && status[i]}</div>
                    <ul key={i}>
                        {result.data.map((r, index) => {
                            return (<li key={index}>{r.id} {r.firstName} {r.lastName}</li>)
                        })}
                    </ul>
                </>)
        })}
     </div>
    );
};

const MemorizedResults = memo(Results, monitoredPropsAreEqual);

export default Tester

• The repository of the example to use use-react-monitor

Parameters

• urls
• freshRate (ms)

Release notes

1.1.30: add the unit test case (Jest)

• 1.0.2: modify the readme.md
• 1.0.1: add a reference

1.0.0: initialization

References

• How to create a customized React hook package and publish it to npm?
• eslint-plugin-react-hooks
• npm-link 與 Invalid hook call 錯誤
• SOLVING REACT HOOKS' INVALID HOOK CALL WARNING

About

• Author
• 100DaysOfCode
• Medium