https://github.com/steveswork/react-hoc-memo

Runs caching for React Higher Order Component (HOC) function results.
https://github.com/steveswork/react-hoc-memo

Last synced: 11 months ago
JSON representation

Runs caching for React Higher Order Component (HOC) function results.

• Host: GitHub
• URL: https://github.com/steveswork/react-hoc-memo
• Owner: steveswork
• Created: 2022-08-30T16:52:35.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-11-22T19:33:38.000Z (over 3 years ago)
• Last Synced: 2025-02-05T06:36:41.468Z (over 1 year ago)
• Language: JavaScript
• Size: 205 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React-HOC-Memo

This package assists with the capture, caching and continued reuse of react Higher Order Components (HOC) type returned by a React HOC function.

Arguments to each new calls to the HOC function and the HOC type returned are cached and reused at subsequent calls to the HOC function bearing identical arguments.

Install


npm i -S @webkrafters/react-hoc-memo

npm install --save @webkrafters/react-hoc-memo

## Requirement

When the `HocMemo::use` method `options.bypass` argument is `false` (i.e. the default value), `Component` argument requires a valid `displayName` static property. The cache key is calculated using this property. To Components lacking this property such as those from 3p libraries, please add a unique `displayName` static propperty.

## Usage

component.js

    import React from 'react';

    

    const Test = props => { ... };

    Test.displayName = 'Test';

    

    export default Test;

hoc.js

    import React from 'react';

    import HocMemo from '@webkrafters/react-hoc-memo';

    

    const hocFunc = (Component, options) => {

	    ...

	    return props => {

		    ...

		    return ();

	    };

    };

    

    const hocMemo = new HocMemo(hocFunc);

    const hocFuncMemo = hocMemo.use.bind(hocMemo); // `hocMemo.use` arguments are passed through to the `hocFunc` function

    

    export default hocFuncMemo;

app.js

    import React, {Fragment} from 'react';

    import hocFuncMemo from './hoc';

    import Test from './component';

    

    const WrappedTest = hocFuncMemo(Test); // `hocMemo.use` arguments are forwarded to the `hocFunc` function

    const WrappedTest1 = hocFuncMemo(Test, { ... }); // `hocMemo.use` arguments are forwarded to the `hocFunc` function

    const WrappedTest2 = hocFuncMemo(Test, { bypass: true /* to bypass the cache */, ... }); // `hocMemo.use` arguments are forwarded to the `hocFunc` function.

    const WrappedTest3 = hocFuncMemo(Test); // WrappedTest3 === WrappedTest

    

    const App = () => (

	    

		    

		    

		    

		    

	    

    );

    

    export default App;

index.js

    import React from 'react';

    import ReactDOM from 'react-dom';

    import App from './app';

    ReactDOM.render(, document.getElementById('root'));

## Design Considerations

Decision to deliver this solution as a function closure versus a class instance was considered. Great factor in the decision was cpu time and memory usage. In large react applications, every bit of memory counts. Majority of professional applications, with every new additional feature, grows larger over time. Class instance delivery method was determined to provide a more efficient resource management.

## License

ISC