use-cached-handlers

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>
);