const { makeRequest, requestInfo } = useRequest(url, options);

import { useRequest, UseRequestStatus } from 'messy-hooks';
 
function Cmp() {
    // 'error' is boolean,
    // 'errorEntity' is the actual error object,
    // 'status' is a helper enum property for you to identity request status.
    const { makeRequest, requestInfo: {loading, error, errorEntity, data, status} } = useRequest("http://xxx.com", {
        method: 'POST',
        // don't pass `body` here
    });
    
    // pass body to `makeRequest`
    makeRequest(JSON.stringify({
        name: 'leo'
    });
    
    if(loading) {}
    if(error) { console.err(errorEntity); }
    
    /*
    enum UseRequestStatus {
  		'Idle' = 'Idle', // initial status
  		'Fetching' = 'Fetching',
  		'FetchSuccess' = 'FetchSuccess',
  		'FetchError' = 'FetchError'
    }
    */
    if(status === UseRequestStatus.FetchSuccess) {}
    
    return <div>{JSON.stringify(data)}</div>
}

const { timerData, startTimer, stopTimer, resetTimer } = useTimer();

import { useTimer } from 'messy-hooks';
 
function Cmp() {
    const { timerData, startTimer, stopTimer, resetTimer } = useTimer();
 
    // hours*3600 + minuts*60 + seconds = rawSeconds
    const { rawSeconds, hours, minutes, seconds } = timerData;
    
    return <div>{JSON.stringify(timerData)}</div>
}

const canvasRef = useCanvas(draw)

import { useCanvas } from 'messy-hooks';
 
function Cmp() {
    const canvasRef = useCanvas((ctx) => {
    // draw here
    });
 
    return <canvas ref={canvasRef} />
}

const size = useSize(elementRef);		

import { useRef } from 'react';
import { useSize } from 'messy-hooks';
 
function Cmp() {
    const ref = useRef();
    const size = useSize(ref);
    console.log(size); // will logg twice: first is all zero and second has actual value
    return <div ref={ref}> Hi </div>
}

const size = useLaterEffect(() => {
  // your code
}, [dep]);