Hey there! Thanks for sharing your thoughts; I appreciate that.

I've reviewed the source code that you provided. Let me share my thoughts on that:

You have React in your code. However, more often, RxJS comes with Angular. It means you have to mix multiple frameworks in a single project what is bad unless you're using micro frontends.

I would strongly think about using react hooks and reactive libraries such as RxJS together. The main reason is that you don't want to bring such complexity.

It's two additional libraries to load. What isn't good from the browser performance standpoint.

If you don't want to load lodash, you must implement custom functions such as - get, set, cloneDeep. That will make code even more complicated.

Deep clone is a performance/optimization game-changer. It's better to use the shallow copy. By the way, there is a great book called "Grokking Simplicity" that explains when and where to use the deep versus shallow copy. (https://www.amazon.com/Grokking-Simplicity-software-functional-thinking/dp/1617296201/ref=sr_1_1?crid=1SQ1G1A1Z7OZ1&keywords=grokking+simplicity&qid=1640060857&sprefix=grokking+simplicit%2Caps%2C179&sr=8-1)

If possible, I would better avoid a string path like this `heading.size.medium`. It's is a common issue with functions such as pluck. No studio can help update such fields when you need to refactor them.

Your examples have single lines of code that demonstrate how to set the value. But the algorithm is encapsulated in the libraries. In the real world, usage of `setLocalCache("Welcome to my App", "heading.text")` will look the same as the given by article approach. For example `this.updateCar({ color: 'red' }). The only difference will be in `this` keyword.

Because of the given above reasons, I would rather stick with the article's proposed approach. It helped me a lot during development ;)