[DOCS] adding reference to UseRef and ref for synchronuous event tutorial page

[tidiview]

How can the documentation be improved? 1- by simplifying https://qwik.builder.io/tutorial/events/synchronous/. I'd like to say that the problem seems to complicated to solve as the clue given is only referring to useClientEffect while in fact the solution is referring to useClientEffect and useRef. I suggest to modify adding a clue referencing to useRef.

2- I don't also understand the sudden apparition of ref in ref={aHref}: it seems like magic. I have never seen such attribute as ref before, therefore I could not event imagine that would exist! It need to be explained: what is ref? Even now, I don't understand: I have to google it away from tutorial, not sure to find relevant information.

3- I don't understand aHref.current!.addEventListener('click', handler);. What does current! means; where does this syntax comes from? How could I imagined that there would be the necessity to REMOVE a previous event handler?!?

4- useRef() is a black box. aHref is therefore out of sight also.

Up so far, I could roughly understand Qwick's logic but from that step, I am giving up, because I can't find any rationality that make sense.

[manucorporat]

Makes sense, maybe we can split this up even more, ref and useRef() is same API as React: https://reactjs.org/docs/hooks-reference.html#useref

I think we are a small core team, that put all together fast, really would appreaciate help to improve the tutorial docs, community and non experts in qwik usually write the best docs

[tidiview]

I'm sorry, I don't know React well, that why tutorial is problematic to me. I'm not able to re-write the docs but based on the above, it is possible to improve them to users not familiar with React or just to lower the level down so that tutorial remains enjoyable and challenging.

[zanettin]

Hi @tidiview The page got updated during the change from useRef to useSignal. https://qwik.builder.io/tutorial/hooks/use-signal/ Not sure if it is clear now:

It is also able to hold a reference of a DOM element created by the component. There are two parts to retrieving a DOM element reference:

• useSignal() returns a store object that contains a value property which will eventually contain the reference.
• ref={ref_variable} is a prop binding that will set the value property of the ref object to the DOM element.

if not, please let me know 👍 otherwise feel free to close the issue 🙏

[zanettin]

@tidiview @manucorporat can we close this one?