This presentation shows how search params/query params may be used for state management, with added benefits:
- Given URL synchronization
- Persisting between reloads
- Easy sharing of the state
- No additional libraries needed
The code consists of Vite application that uses React Router DOM and just a few other dependencies to show the concept in action.
The main App.tsx component exposes 6 "phases" of implementing the search params sync. Check out each of them to see how the concept evolves.
Just jump to 6_BoxPlayground.tsx to see the final implementation.
You can run the test app and experiment with the "phase" components linked in the Router section of the ./code/src/App.tsx file by running the app
from the code directory (pnpm suggested, but may use your preferred package manager):
pnpm i
pnpm dev