You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Tools for managing "global state" are plentiful these days, but most of these tools:
40
-
41
-
- Mistake **server cache state** for **global state**
42
-
- Force you to manage async data in a synchronous way
43
-
- Duplicate unnecessary network operations
44
-
- Use naive or over-engineered caching strategies
45
-
- Are too basic to handle large-scale apps or
46
-
- Are too complex or built for highly-opinionated systems like Redux, GraphQL, [insert proprietary tools], etc.
47
-
- Do not provide tools for server mutations
48
-
- Either do not provide easy access to the cache or do, but expose overpowered foot-gun APIs to the developer
49
-
50
-
## The Solution
51
-
52
-
React Virtual exports a set of hooks that address these issues. Out of the box, React Virtual:
53
-
54
-
- Separates your **server cache state** from your **global state**
55
-
- Provides async aware APIs for reading and updating server state/cache
56
-
- Dedupes both async and sync requests to async resources
57
-
- Automatically caches data, invalidates and refetches stale data, and manages garbage collection of unused data
58
-
- Scales easily as your application grows
59
-
- Is based solely on Promises, making it highly unopinionated and interoperable with any data fetching strategy including REST, GraphQL and other transactional APIs
60
-
- Provides an integrated promise-based mutation API
61
-
- Opt-in Manual or Advance cache management
62
-
63
-
</details>
64
-
65
-
<details>
66
-
<summary>Inspiration & Hat-Tipping</summary>
67
-
<br />
68
-
A big thanks to both [Draqula](https://github.com/vadimdemedes/draqula) for inspiring a lot of React Virtual's original API and documentation and also [Zeit's SWR](https://github.com/zeit/swr) and its creators for inspiring even further customizations and examples. You all rock!
69
-
70
-
</details>
71
-
72
-
<details>
73
-
<summary>How is this different from Zeit's SWR?</summary>
74
-
<br />
75
-
76
-
[Zeit's SWR](https://github.com/zeit/swr) is a great library, and is very similar in spirit and implementation to React Virtual with a few notable differences:
77
-
78
-
- Automatic Cache Garbage Collection - React Virtual handles automatic cache purging for inactive queries and garbage collection. This can mean a much smaller memory footprint for apps that consume a lot of data or data that is changing often in a single session
79
-
- No Default Data Fetcher Function - React Virtual does not ship with a default fetcher (but can easily be wrapped inside of a custom hook to achieve the same functionality)
80
-
-`useMutation` - A dedicated hook for handling generic lifecycles around triggering mutations and handling their side-effects in applications. SWR does not ship with anything similar, and you may find yourself reimplementing most if not all of `useMutation`'s functionality in user-land. With this hook, you can extend the lifecycle of your mutations to reliably handle successful refetching strategies, failure rollbacks and error handling.
81
-
- Prefetching - React Virtual ships with 1st class prefetching utilities which not only come in handy with non-suspenseful apps but also make fetch-as-you-render patterns possible with React Virtual. SWR does not come with similar utilities and relies on `<link rel='preload'>` and/or manually fetching and updating the query cache
82
-
- Query cancellation integration is baked into React Virtual. You can easily use this to wire up request cancellation in most popular fetching libraries, including but not limited to fetch and axios.
83
-
- Query Key Generation - React Virtual uses query key generation, query variables, and implicit query grouping. The query key and variables that are passed to a query are less URL/Query-based by nature and much more flexible. All items supplied to the query key array are used to compute the unique key for a query (using a stable and deterministic sorting/hashing implementation). This means you can spend less time thinking about precise key matching, but more importantly, allows you to use partial query-key matching when refetching, updating, or removing queries in mass eg. you can refetch every query that starts with a `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables, and even use functional filtering to select queries in most places. This architecture is much more robust and forgiving especially for larger apps.
84
-
85
-
</details>
86
-
87
37
<!-- ## Used By
88
38
89
39
> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_ -->
0 commit comments