Components Based SPA State Management (css tricks article)

#1

Hi,

SInce I’m bulding a SPA without a Framwork I followed @hankchizljaw 's Article about Vanilla JS State Management with Proxy:

I wonder: how to apply this concept to manage state on a ‘per component’ basis instead of app-wide state, so not all components are rerendered if the state changes?

My current own solution is to pass a state to my component constructur or set its state, when state changes, then only this component re-renders:

example:

I’m aware that this isnt a very good solution by itself, since managing the state in a way that other components get notified and decide if they have a reason to rerender. Because of this I researched solutions and landed on andys article.

Is this overengineering to fine tune rendering per component, because andys solution works of course perfectly, do you have any suggestions?

thanks

#2

I just discovered andys new article

there are some hints to limit the re-rendering

edit: acutally I think I discovery the latter article first (the css tricks is linked at the bottom), but it seemed to barebones, now the css tricks tutorials seems too much, so the picalilli is perfect now… I didnt get how an easy concept (the usage of) Proxy is

thanks for both

1 Like
#3

Yeh I was gonna suggest the newer one, so glad you found it. As I said in there too, it’s a bit like keeping an eye on wether or not your component needs to re-render in React (useEffect).

Good luck!

#4

I have no experience in any framework or web components, I’m doing this primarily for learning purposes, although the app is real, but not commercial. I want to avoid Frameworks as much as possible, but I think I will use Lit HTML and/or Lit Element with Web Compoenents

I’m half way there, the rerender trigger for explicit instances works, simple example of a tiny module, I hope self explanatory for the interested:

Next step is to implement this for imported modules, I’m using a kind of registry to ‘cache’ the components, without leaving the in the dom

I will try to implement a kind of preConnectToDom method I think, which checkes if the compoenent has to be rerendered befored being re-append to the DOM

Thanks again, Andy, the articles helped a ton, the Proxy API is awesome

1 Like