React Hooks component keeps refreshing: React.memo a HOC:ed component

0
votes

I have a component that keeps getting refreshed even when I don't want it to. I've tried using React.memo() but to no avail. Turns out maybe this is because I try to use it on a Higher Order Component.

So here's the code:

import { withFocusable } from '@noriginmedia/react-spatial-navigation';

const Home = React.memo(({ setFocus, hasFocusedChild }) => {
  const navigate = useNavigate();
  ...
}, (props, nextProps) => {
  console.log('props', props);
  console.log('nextProps', nextProps);
  return !nextProps.focused;
});

export default withFocusable({ trackChildren: true })(Home);

The props (and nextProps) here show props for react-spatial-navigation's withFocusable:

{
   focused: false
   hasFocusedChild: false
   navigateByDirection: ƒ ()
   parentFocusKey: "sn:focusable-item-1"
   pauseSpatialNavigation: ƒ ()
   realFocusKey: "sn:focusable-item-6"
   resumeSpatialNavigation: ƒ ()
   setFocus: ƒ ()
   stealFocus: ƒ ()
   updateAllSpatialLayouts: ƒ ()
   [[Prototype]]: Object
}

Meaning I can't reach the Home-component props. Any way I can get the props of my component?

reactjsreact-hooks