diff --git a/docs/decisions/044-rr-devtools.md b/docs/decisions/044-rr-devtools.md new file mode 100644 index 000000000..904051aba --- /dev/null +++ b/docs/decisions/044-rr-devtools.md @@ -0,0 +1,63 @@ +# React Router DevTools + +Date: 2025-05-05 + +Status: accepted + +## Context + +Epic Stack uses React Router for routing. React Router is a powerful +library, but it can be difficult to debug and visualize the routing +in your application. This is especially true when you have a complex +routing structure with nested routes, dynamic routes, and you rely +on data functions like loaders and actions, which the Epic Stack does. + +It is also hard to know which routes are currently active +(which ones are rendered) and if any if the loaders are triggered +when you expect them to be. This can lead to confusion and frustration +and the use of console.log statements to debug the routing in your +application. + +This is where the React Router DevTools come in. The React +Router DevTools are a set of tools that do all of these things for you. + +React Router has a set of DevTools that help debug and visualize the +routing in your application. The DevTools allow you to see the +current route information, including the current location, the matched +routes, and the route hierarchy. This can be very helpful when debugging +your applications. The DevTools also hook into your server-side by +wrapping loaders and actions, allowing you to get extensive +information about the data being loaded and the actions being dispatched. + +## Decision + +We will add the React Router DevTools to the Epic Stack. The DevTools +will be added to the project as a development dependency. The DevTools +will be used in development mode only. + +The DevTools will be used to enhance the following: + +1. Visualize the routing in your application +2. Debug the routing in your application +3. See the returned loader data and action data in the DevTools +4. Open routes in your editor directly from the browser +5. See the route boundaries in your application +6. See cache information returned via headers from your loaders +7. See which loaders/actions are triggered when you navigate to a route +8. and a lot more! + + +## Consequences + +With the addition of the React Router DevTools, you will not have to rely on +console.log statements to debug your routing. The DevTools will provide you +with the tools to ship your applications faster and with more confidence. + +The DevTools will also help you visualize the routing in your application, +which can be very helpful in understanding routing in general, and figuring +out if your routes are set up correctly. + +They are not included in the production build by default, so you will not +have to worry about them being included in your production bundle. +They are only included in development mode, so you can use them without +any negative performance impact in production. \ No newline at end of file