use-intensive-function v1.0.2

use-intensive-function

• That hassle free hook which takes care of all that loading/loaded state hack we have to do while doing CPU intensive caluclations like recursion.

• use-intensive-function plays along with React Suspense and under the hood with cache management packages

• workerpool package is also used which returns a promise until the function is executed. Which is exaclty suspense needs to render fallback.

workerpool, lru-cache, immer, md5 etc.

• Until the the function is executed, the promise is thrown by the use-intensive-function which will by caught by suspense and then suspense will render fallback, which can by any Loading component of your choice, until the promise actual resolves and the result arrives. After the promise is resolved, suspense will then render the component. Also, it has been made sure that it doesn't make the same ajax call request again and again. For this, data is stored in cache.

Installation

yarn add use-intensive-function

or

npm i use-intensive-function

Usage

import React, { Suspense } from 'react';
import useItensiveFunction from 'use-intensive-function';

function fib(num){
    if(num <= 1){
        return num;
    }
    return fib(num - 1) + fib(num - 2);
}

const Fibonacci = ({ num }) => {

    /**
        * @param {Function} fib
        * @param {Array} [args] 
    */

    const result = useItensiveFunction(fib, [num]);

    return (
        <div>
            <h4>
            Fibonacci For {num} = {'    '} 
             <strong className='red-text'>{result}</strong>
            </h4>
        </div>
    )
}

const Calculations = () => {

    return (
        <div className="container center">
            <Suspense fallback={<LazyPreloader />}>
                <Fibonacci num={10} />
            </Suspense>
            <Suspense fallback={<LazyPreloader />}>
                <Fibonacci num={20} />
            </Suspense>
            <Suspense fallback={<LazyPreloader />}>
                <Fibonacci num={30} />
            </Suspense>
        </div>
    )
}

Repository

Explore

About The Author

Website

Github