fix: react hooks observers

[helciofranco]

This PR fixes and reduces a lot of re-renders across our query observers.

This issue was caused due to the way which @tanstack/react-query handles the tracked properties to re-renders.
Internally, they implemented a Proxy to intercept and track which properties a component is listening from a useQuery hook.

It means that when we're calling a useQuery with spread operators, it is forwarding to that Proxy that we want to listen to EVERY existent property.

const query = useQuery();

return { custom: query.data, ...query }; // <- "...query" is the issue here

So, what I did? I created the useNamedQuery that is also a Proxy and it'll also rename the data property to anything you want to name, and keeping the performance everywhere.

This ensures we're going to re-render ONLY when tracked properties get updates.

⚠️ Before	✅ Now
	Only 1 property will trigger re-renders

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟢	Statements	87.8%	324/369
🔴	Branches	48.98%	48/98
🟢	Functions	92.86%	91/98
🟢	Lines	89.17%	321/360

Test suite run success

23 tests passing in 3 suites.

Report generated by 🧪jest coverage report action from 072bfb8

[luizstacio]

@helciofranco if I understand the effect of this change, if the users adds a isLoading or other props, them the hook start to track the new properties correct? like { data, isLoading } would track both.

Can we keep the hooks working with named returns? { balance } = useBalance()?

[helciofranco]

@luizstacio that's correct.

From your example, it would re-render only if balance or isLoading got changes.

const { balance, isLoading } = useBalance();