Establish good practices around useCallback, useMemo and memo

Summary

Follow-up ticket from Slack discussion around useCallback, useMemo and memo: https://xwp.slack.com/archives/CCCAUAH6F/p1643966654671809 https://github.com/GoogleForCreators/web-stories-wp/pull/10388#pullrequestreview-872524783

We want to establish good practices around them, we need to choose the direction e.g. removing some of the unnecessary usages or going all-in. We might want to compare those approaches CPU/memory-wise (cost of all-in approach).

[miina]

Yes, I think this would be worthwhile and I tend to agree with Max’s summary above. Seems like a reasonable path forward.

Wanna take a stab at this and identifying possible new reducers and places to use more memo and less useCallback/useMemo? Maybe there are event some lint rules that we could use.

Not this sprint at least, just cleaning up the New Issues column currently.

[littlemilkstudio]

I think a lot of our useCallbacks should just be actions straight from the story reducer if possible.

Right now we have a lot of this in the codebase:

const { someAtomicAction, someState } = useStory(...);
const action = useCallback((...args) => someAtomicAction({ ...args, someState }), [someState, someAtomicAction]);
return <SomeComponent someActionProp={action} />

which should really just be:

const { someSpecificAction } = useStory(...);
return <SomeComponent someActionProp={someSpecificAction} />

We really shouldn’t see re-renders in components when the re-render is happening just to update an action in the component.

As far as memo goes, I think it’s fine to use in 3 scenarios:

1. Top level component of a large subtree to isolate what’s causing it to re-render on certain actions
2. Components returned from a [...].map(...) call
3. Component memoized off a deferred value (we don’t really use this)

I’m not a fan of this article mentioned to memoize all things. I think memoizing everything just adds to the complexity of the code & what updates when, and doesn’t fix any of the root issues which all stem around passing down data wisely (whether through props or hooks) https://attardi.org/why-we-memo-all-the-things/

I think useCallback & useMemo should be used in providers or when passing to a memoized component, but it’s important to think if they’re actually doing anything. Most of the time the wins are around minimizing the source we’re getting state through, than the downstream dependencies consuming said state