[v4][ResourceList.Item] Remove withContext

[AndrewMusgrave]

WHY are these changes introduced?

Part of #1484

WHAT is this pull request doing?

I'm removing withContext in favor of a wrapper component

How to 🎩

Tests / percy / development server

[AndrewMusgrave]

A lot of the lacking coverage has been removed in master with simpler interaction states. So when master is merged into version-4.0.0 it should be 👌

[BPScott]

Having a bunch of functions defined beneath the return feels odd to me. Can you pull these up to be towards the start of the function.

This is a functional component and callback functions that we define need to be wrapped in useCallback. Otherwise a new callback function ends up being created every render, and when you pass that down to a child component you end up rerendering it - as its props have changed becase it's onWhatever handler is a different function to the one that was used before.

Wrapping these declarations in useCallback means the same function will be passed to the child component if given the same arguments, thus avoiding unneeded rerenders.

const handleFocusedBlur  = useCallback(() => {
   setFocusState({focused: true, focusedInner: true});
  }, []);

See BPScott/ksw-quiz@30b4c3f for an example of how I dealt with this in my little toy project for playing with react

[AndrewMusgrave]

I find putting the functions below cleans up the code, Tim does the same as well I think. However, if we use functional expressions we'll want to pull it up. Thanks for pointing this out, I was worried about it but wasn't aware there was a hook to solve it 🙏

Address

[alex-page]

🎩looks good to me.