Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: react hooks observers #1127

Merged
merged 12 commits into from
Mar 11, 2024
Merged

fix: react hooks observers #1127

merged 12 commits into from
Mar 11, 2024

Conversation

helciofranco
Copy link
Member

This is exactly the same implementation of FuelLabs/fuels-npm-packs#55
Applying here just for compatibility purposes (temporarily since this will be removed soon).


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
Screenshot 2024-03-08 at 11 13 38 Only 1 property will trigger re-renders Screenshot 2024-03-08 at 11 12 59

@helciofranco helciofranco deleted the branch master March 8, 2024 17:35
@helciofranco helciofranco reopened this Mar 8, 2024
@helciofranco helciofranco changed the base branch from hf/fix/example to master March 8, 2024 17:36
@helciofranco helciofranco linked an issue Mar 8, 2024 that may be closed by this pull request
Copy link
Contributor

github-actions bot commented Mar 8, 2024

Coverage report for ./packages/app

St.
Category Percentage Covered / Total
🟡 Statements 64.96% 3261/5020
🔴 Branches 41.43% 587/1417
🔴 Functions 48.44% 681/1406
🟡 Lines 65.53% 3144/4798

Test suite run success

236 tests passing in 72 suites.

Report generated by 🧪jest coverage report action from d49c95b

@helciofranco helciofranco merged commit af8c470 into master Mar 11, 2024
14 checks passed
@helciofranco helciofranco deleted the hf/fix/react-hooks-observers branch March 11, 2024 17:58
helciofranco added a commit that referenced this pull request Mar 11, 2024
I've removed `.tsx` extensions from our hooks on this PR
#1127
Let's keep `.tsx` for files that have actual `JSX`.
helciofranco pushed a commit that referenced this pull request Mar 12, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to master, this PR
will be updated.


# Releases
## @fuel-wallet/react@0.16.0

### Minor Changes

- [#1127](#1127)
[`af8c470`](af8c470)
Thanks [@helciofranco](https://github.com/helciofranco)! - fix: fuel
hooks will only re-render tracked properties, instead of listening to
every useQuery property.

## @fuel-wallet/connections@0.16.0

### Patch Changes

-   Updated dependencies \[]:
    -   @fuel-wallet/sdk@0.16.0
    -   @fuel-wallet/types@0.16.0

## @fuel-wallet/sdk@0.16.0

### Patch Changes

-   Updated dependencies \[]:
    -   @fuel-wallet/types@0.16.0

## @fuel-wallet/playwright-utils@0.16.0





## @fuel-wallet/types@0.16.0



## fuels-wallet@0.16.0

### Minor Changes

- [#1099](#1099)
[`82fba09`](82fba09)
Thanks [@helciofranco](https://github.com/helciofranco)! - Automatically
identify seed phrase length and update the selected format to fit.

### Patch Changes

- [#1081](#1081)
[`15358f5`](15358f5)
Thanks [@matt-user](https://github.com/matt-user)! - Use the packages
migrated to fuels npm packs

- [#1118](#1118)
[`6585923`](6585923)
Thanks [@helciofranco](https://github.com/helciofranco)! - truncates
long account name correctly

-   Updated dependencies \[]:
    -   @fuel-wallet/connections@0.16.0
    -   @fuel-wallet/sdk@0.16.0
    -   @fuel-wallet/types@0.16.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve React Hooks (useQuery) performance
2 participants