Component level caching

[crystal scaffold]

Basically i am looking to cache some values at a component level, but don't want the component to re-render when i set it.

Is there a react's useRef hook equivalent in qwik ?

I did see "ref" in docs (https://qwik.builder.io/docs/components/overview/#storing-a-reference), but it was more around storing a "reference" to a component/dom element.

In react, useRef can be used to do both.

If i missed any docs, please let me know. Any help is really appreciated.

[ivory nexus]

Qwik is very good at not rerendering when it doesn't need to.

If your render function doesn't use a store value, changing that store value will not cause a re-render. Check out this in the playground:

import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
  const store = useStore({valueA: 0, valueB: 0})
  console.log('rendering')

  const valueA  = store.valueA // NOTE: If we inline {store.valueA} below, it is even more optimized

  return <p>
    Value A is: {valueA}
    <button onClick$={() => store.valueA++}>A++</button>
    <button onClick$={() => store.valueB++}>B++</button>
  </p>;
});

[crystal scaffold]

Thanks. got it.

and just to scratch the surface here, is it because since JSX didn't use the "state/store", qwik didn't make the "subscription" on the state and therefore no re-rendering ? Or reasoning is something different ?

[ivory nexus]

Yep, exactly

[nimble night]

I also want to do more with ref, but can't figure out how.
I wanted to recreate our heavy image slider and have to keep track of sizes of the dom elements. For this I have to create a map out of this refs. This is crashing hard, as Element of course is not serializable.

[crystal scaffold]

You are storing those refs directly in map or does that map resides in store?

[nimble night]

My plan was to put it in the store, but this is not possible. Might be a qwik thing after all. HTML first might also mean, more vanilla js for me. Of course I can also access the dom-elements from the parent with the parent ref living inside a useSignal. I'm not quite sure how qwik wants us to code. If I would rewrite the code to use slots, I would actually have to do vanilla and interact with the dom. It might also be the fastest approach, but I used a framework for not keeping track of the dom in the first place 😄

[crystal scaffold]

I think putting a map in the store is not possible because maps are not serialzable. But if you use an Object as a Map, and put that in the store. that should be serilizable

[nimble night]

I did that afterwards. Turns out it works, but cries like a baby if you use it somewhere in the hooks due to Element not serializable. I'm not sure if I have just not enough knowledge about qwik or there is a lot missing to do complex stuff.

For my blog I wrote a very complex React Component on top of ReactMarkdown with iterating through React.Children and also looking up stuff in ref maps to implement custom functionality. I actually don't think this is possible with qwik right now or maybe never will be, due to the chunk approach. Thanks anyway, I will check if I can get it to work with some vanilla and the parent now.

[crystal scaffold]

Sure.

Just to let you know my usecase in case that might help. I had put my ref inside a signal. That signal was being used in an eventHandler and that eventHandler(scroll event) was registered in useClientSideEffect.

Also one request. If you could get the vanilla js approach to work. Would be really helpful if you could share how you made it work. There is some code that i actually want to run outside qwik to manipulate dom directly without using partytown

[nimble night]

This is really really hard if you not only render stupid html 😄

Can't even debounce in an EventHandler

[crystal scaffold]

Yeah. Right. Even i couldn't get the debounce to work correctly with onscroll handling. Need to look into that as well 😅

[nimble night]

You need to track it in a task. This is kind of weird.

[crystal scaffold]

👌