fix(react-query): move away of uSES #8434
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit d878172. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 2 targetsSent with 💌 from NxCloud. |
…/8384 # Conflicts: # packages/react-query/src/__tests__/useQuery.test.tsx
| @@ -54,65 +54,6 @@ describe('useIsFetching', () => { | |||
| await findByText('isFetching: 0') | |||
| }) | |||
|
|
|||
| it('should not update state while rendering', async () => { | |||
There was a problem hiding this comment.
I'm guessing we should just trust React to optimize re-renders? 🤷
| const filtersRef = React.useRef(filters) | ||
| React.useEffect(() => { | ||
| filtersRef.current = filters | ||
| }, [filters]) |
There was a problem hiding this comment.
useMutationState() was memoizing filters, so I'm guessing we should be doing it here too
| const [result, setResult] = React.useState(() => | ||
| observer.getOptimisticResult(defaultedOptions), |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| console.log(`changed key "${typedKey}"?`, changed, { | ||
| prev: this.#currentResult[typedKey], | ||
| next: prevResult[typedKey], | ||
| }) |
There was a problem hiding this comment.
| console.log(`changed key "${typedKey}"?`, changed, { | |
| prev: this.#currentResult[typedKey], | |
| next: prevResult[typedKey], | |
| }) |
| @@ -698,11 +704,14 @@ export class QueryObserver< | |||
| includedProps.add('error') | |||
| } | |||
|
|
|||
| return Object.keys(this.#currentResult).some((key) => { | |||
| return [...includedProps].some((key) => { | |||
There was a problem hiding this comment.
Tiny optimization that also made debugging a bit easier
| @@ -2485,38 +2486,6 @@ describe('useQuery', () => { | |||
| expect(queryCache.find({ queryKey: key })!.options.retryDelay).toBe(20) | |||
| }) | |||
|
|
|||
| it('should batch re-renders', async () => { | |||
There was a problem hiding this comment.
This test doesn't work anymore when we're force rendering
I'm guessing we just have to trust the concurrency in React to do this in an optimal way?
| @@ -82,26 +82,27 @@ export function useBaseQuery< | |||
| ), | |||
| ) | |||
|
|
|||
| const [_, setForceUpdate] = React.useState(0) | |||
|
|
|||
| const result = observer.getOptimisticResult(defaultedOptions) | |||
There was a problem hiding this comment.
I wanted to use a useState() here but it made the blast radius really big and broke useSuspense()'s test etc
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8434 +/- ##
===========================================
+ Coverage 46.21% 63.11% +16.89%
===========================================
Files 198 134 -64
Lines 7509 4809 -2700
Branches 1711 1340 -371
===========================================
- Hits 3470 3035 -435
+ Misses 3664 1535 -2129
+ Partials 375 239 -136 |
Closes #8384 (I think/hope !?!!?)
Refactor
@tanstack/react-queryto not rely onuseSyncExternalStore()as it creates issues in concurrent rendering