Decoupled navigation request handling
May 2023, by Maarten Nieber
Conclusion

Pros and cons

We've seen how do context-depend url updates using a navigation context. This has the advantage that we can use the same component in different places, without the need to explicitly tell the component how url changes should happen. In general, I like to have dumb components with simple code, and this approach promotes this. Moreover, by using centralized navigation functions (such as toPost) it's easier to enforce consistency in the url changes than when this is left to the components. Finally, since we don't have to pass any details related to url management to the components, there is less prop drilling and therefore less code clutter.

The downside is that the indirection makes the code for handling navigation less explicit. When we call toPost then a dynamic lookup is performed to determine which url change must be performed. This is more complex then simply updating the url in the component. For this reason, I use simple navigation functions alongside context-dependent ones.

The url-effect is an effective way to synchronize the url with the application state. In my experience though, url-effects usually need to be customized to produce the correct behaviour. This can involve trial and error, and can be tricky to get right. However, I prefer having these tricky details in a single location, rather than having to make different components work together to produce the right results.

Conclusion

I've introduced an approach for decoupling the handling of navigation requests from the components that make these requests. I've also shown how the url and application can be synchronized using url effects. I'm still experimenting with this approach, but so far it seems to work well. I expect my thoughts on this topic to evolve, so I wil probably return to this topic later.