use-cached-handlers
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

React Hook - Use Cached Handlers

Simple React hook to cache event handlers.

Description:

This is a hook that is useful for caching a list of actions / events especially for when the list of items should not change but may be subjected to unecessary re-renders because the list's parent is re-rendered.

In short, this hook can avoid redefining functions - which as a result, re-renders the list items (even though they don't need to).

NOTE: Do NOT use this hook if your list items SHOULD be re-rendered as a side-effect of updated parent state!

Example usage:

const [getHandlers] = useCachedHandlers((event) => {
  // handle click/hover/etc. event
}, [...hookDependencies]);

return (
  <ul>
    {list.map(item => (
      <ChildComponent onClick={getHandlers(item.key)}>{item.label}</ChildComponent>
    ))}
  </ul>
);

Package Sidebar

Install

npm i use-cached-handlers

Weekly Downloads

6

Version

0.0.1

License

MIT

Unpacked Size

5.34 kB

Total Files

6

Last publish

Collaborators

  • jeffreyluong