{"id":19196631,"url":"https://github.com/steveswork/react-hoc-memo","last_synced_at":"2025-07-22T09:35:32.335Z","repository":{"id":58260367,"uuid":"530748046","full_name":"steveswork/react-hoc-memo","owner":"steveswork","description":"Runs caching for React Higher Order Component (HOC) function results.","archived":false,"fork":false,"pushed_at":"2022-11-22T19:33:38.000Z","size":210,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-05T06:36:41.468Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steveswork.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-30T16:52:35.000Z","updated_at":"2022-11-22T19:33:41.000Z","dependencies_parsed_at":"2023-01-22T06:45:25.146Z","dependency_job_id":null,"html_url":"https://github.com/steveswork/react-hoc-memo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveswork%2Freact-hoc-memo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveswork%2Freact-hoc-memo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveswork%2Freact-hoc-memo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveswork%2Freact-hoc-memo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steveswork","download_url":"https://codeload.github.com/steveswork/react-hoc-memo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271527,"owners_count":19774859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T12:14:08.554Z","updated_at":"2025-02-23T04:44:26.132Z","avatar_url":"https://github.com/steveswork.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-HOC-Memo\n\nThis package assists with the capture, caching and continued reuse of react Higher Order Components (HOC) type returned by a React HOC function.\n\nArguments 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.\n\n\u003ch4\u003e\u003cu\u003eInstall\u003c/u\u003e\u003c/h4\u003e\n\nnpm i -S @webkrafters/react-hoc-memo\n\nnpm install --save @webkrafters/react-hoc-memo\n\n## Requirement\n\nWhen 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.\n\n## Usage\n\n\u003ci\u003e\u003cu\u003ecomponent.js\u003c/u\u003e\u003c/i\u003e\n\n    import React from 'react';\n    \n    const Test = props =\u003e { ... };\n    Test.displayName = 'Test';\n    \n    export default Test;\n\n\u003ci\u003e\u003cu\u003ehoc.js\u003c/u\u003e\u003c/i\u003e\n\n    import React from 'react';\n    import HocMemo from '@webkrafters/react-hoc-memo';\n    \n    const hocFunc = (Component, options) =\u003e {\n\t    ...\n\t    return props =\u003e {\n\t\t    ...\n\t\t    return (\u003cComponent  {  ...props  } /\u003e);\n\t    };\n    };\n    \n    const hocMemo = new HocMemo(hocFunc);\n    const hocFuncMemo = hocMemo.use.bind(hocMemo); // `hocMemo.use` arguments are passed through to the `hocFunc` function\n    \n    export default hocFuncMemo;\n\n\u003ci\u003e\u003cu\u003eapp.js\u003c/u\u003e\u003c/i\u003e\n\n    import React, {Fragment} from 'react';\n    import hocFuncMemo from './hoc';\n    import Test from './component';\n    \n    const WrappedTest = hocFuncMemo(Test); // `hocMemo.use` arguments are forwarded to the `hocFunc` function\n    const WrappedTest1 = hocFuncMemo(Test, { ... }); // `hocMemo.use` arguments are forwarded to the `hocFunc` function\n    const WrappedTest2 = hocFuncMemo(Test, { bypass: true /* to bypass the cache */, ... }); // `hocMemo.use` arguments are forwarded to the `hocFunc` function.\n    const WrappedTest3 = hocFuncMemo(Test); // WrappedTest3 === WrappedTest\n    \n    const App = () =\u003e (\n\t    \u003cFragment\u003e\n\t\t    \u003cWrappedTest  {  ...  } /\u003e\n\t\t    \u003cWrappedTest1  {  ...  } /\u003e\n\t\t    \u003cWrappedTest2  {  ...  } /\u003e\n\t\t    \u003cWrappedTest3  {  ...  } /\u003e\n\t    \u003c/Fragment\u003e\n    );\n    \n    export default App;\n\n\u003ci\u003e\u003cu\u003eindex.js\u003c/i\u003e\u003c/b\u003e\n\n    import React from 'react';\n    import ReactDOM from 'react-dom';\n    import App from './app';\n    ReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n\n## Design Considerations\n\nDecision to deliver this solution as a function closure versus a class instance was considered. Great factor in the decision was \u003cb\u003e\u003ci\u003e\u003cu\u003ecpu time\u003c/u\u003e\u003c/i\u003e\u003c/b\u003e and \u003cb\u003e\u003ci\u003e\u003cu\u003ememory\u003c/u\u003e\u003c/i\u003e\u003c/b\u003e 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.\n\n## License\n\nISC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveswork%2Freact-hoc-memo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteveswork%2Freact-hoc-memo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveswork%2Freact-hoc-memo/lists"}