Prevents unnecessary re-renders using a state slice HOC

withStateSlice.jsx

function withStateSlice(Comp, slice) {
  const MemoComp = React.memo(Comp);
  function Wrapper(props, ref) {
    const state = useAppState();
    const cell = slice(state, props);
    return <MemoComp ref={ref} state={cell} {...props} />;
  }
  Wrapper.displayName = `withStateSlice(${Comp.displayName || Comp.name})`;
  return React.memo(React.forwardRef(Wrapper));
}