Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Invalidate HMR singletons on config change
Include configuration data in singleton cache keys to ensure instances are recreated when settings change during Hot Module Replacement.
Bad example
| 1 | import { remember } from '@epic-web/remember'; |
| 2 | import { QueryClient } from '@tanstack/react-query'; |
| 3 |
|
| 4 | const config = { |
| 5 | defaultOptions: { queries: { staleTime: 5000 } }, |
| 6 | }; |
| 7 |
|
| 8 | // BAD: Key is static. Changing 'staleTime' won't update the client during HMR. |
| 9 | export const queryClient = remember('query-client', () => { |
| 10 | return new QueryClient(config); |
| 11 | }); |
Explanation (EN)
Using a static key for a persisted singleton means the instance survives HMR even if you change its configuration code. If you modify `staleTime`, the old client (with the old time) is still returned, confusing the developer.
Objašnjenje (HR)
Korištenje statičnog ključa za perzistirani singleton znači da instanca preživljava HMR čak i ako promijenite konfiguracijski kod. Ako promijenite `staleTime`, vraća se stari klijent (sa starim vremenom), što zbunjuje developera.
Good example
| 1 | import { remember } from '@epic-web/remember'; |
| 2 | import { QueryClient, type QueryClientConfig } from '@tanstack/react-query'; |
| 3 |
|
| 4 | const config: QueryClientConfig = { |
| 5 | defaultOptions: { queries: { staleTime: 5000 } }, |
| 6 | }; |
| 7 |
|
| 8 | // GOOD: Key includes config hash. Changing config invalidates the cache. |
| 9 | export const queryClient = remember( |
| 10 | `query-client-${JSON.stringify(config)}`, |
| 11 | () => new QueryClient(config) |
| 12 | ); |
Explanation (EN)
By interpolating the configuration into the cache key, any change to the config object generates a new key. This forces `remember` to discard the old instance and create a new one with the updated settings immediately.
Objašnjenje (HR)
Interpolacijom konfiguracije u ključ predmemorije, svaka promjena u konfiguracijskom objektu generira novi ključ. To prisiljava `remember` da odbaci staru instancu i odmah stvori novu s ažuriranim postavkama.
Notes (EN)
Also prefer using exported interfaces like `QueryClientConfig` over complex utility types like `ConstructorParameters<typeof QueryClient>[0]` for better readability.
Bilješke (HR)
Također preferirajte korištenje izvezenih sučelja poput `QueryClientConfig` umjesto složenih pomoćnih tipova poput `ConstructorParameters<typeof QueryClient>[0]` radi bolje čitljivosti.