Use react-freeze to optimize TabController pages

[ethanshar]

Description

Use react-freeze to optimize functionality of TabController.TabPage so pages that are not focused will not trigger renders

Changelog

Use react-freeze to optimize functionality of TabController.TabPage so pages that are not focused will not trigger renders

[M-i-k-e-l]

Why not wasActive && !isActive or (to be sure we don't have a race condition):

if (isActive) {
  ...
} else if (wasActive) {
  runOnJS(setFocused)(false);
}

[ethanshar]

I change it.. now it's better.
Apparently we got to this part of code more than once, after adding currentPage to dependency array of useAnimatedReaction it fixed it.. so we can rely completely on wasActive

[ethanshar]

@M-i-k-e-l
I changed the implementation again, I think it's even simpler now
It has a single useAnimatedReaction so I think it's more bug prune
Let me know if you find something 😬

[ethanshar]

@M-i-k-e-l
I fix the logic a little bit..
I fixed how we handle pages that are near the active page - this is relevant when using PageCarousel

[M-i-k-e-l]

As we saw, adding the following log reveals problems in the logic of the frozen tabs:

console.log('Ethan', index, !shouldLoad || !focused);

[M-i-k-e-l]

When on the Posts tab (index=1), do we want the Reviews (index=2) to load? It does not.

[ethanshar]

As we saw, adding the following log reveals problems in the logic of the frozen tabs:

console.log('Ethan', index, !shouldLoad || !focused);

The right thing to check is focused and not both IMO
Cause you want to check the focus logic (which seems like it's working)
The freeze also affected by shouldLoad which might give different results

[M-i-k-e-l]

As we saw, adding the following log reveals problems in the logic of the frozen tabs:

console.log('Ethan', index, !shouldLoad || !focused);

The right thing to check is focused and not both IMO Cause you want to check the focus logic (which seems like it's working) The freeze also affected by shouldLoad which might give different results

But if we freeze when !shouldLoad, then why have a different logic for the carousel? Assuming it has the same logic for shouldLoad, it'll be frozen or not at the same time, wouldn't it?