[✨] useRenderIndex

[shairez]

Is your feature request related to a problem?

When rendering projected children during CSR, there's often times a need to know the current render index of the component, to prevent flickers.

For example, an accordion component with a selectedIndex set to 1.

Because Qwik is rendering child components during CSR in parallel, there's no guarantee that the components will run in the same order as they are defined in the JSX

So we can't rely on a counter that assigns the next index for each new child component.

Describe the solution you'd like

I would like to have a hook that will return a signal with the index of the current component in the context of either its parent Slot or element.

something like:

const thisCompIndexSig = useRenderIndex();

(for slots for example, because we are looping over the projected children inside of the visitor, we can maybe assign their index to the slot context and read it in the hook)

Describe alternatives you've considered

What we're doing now is to loop over child elements using querySelector during "visible task" to get the rendered index of each child component -

https://github.com/qwikifiers/qwik-ui/blob/main/packages/kit-headless/src/components/tabs/tabs.tsx#L214

Additional context

This solution is critical for Qwik UI and I'm sure other composable & reusable components that want to prevent a flicker on client side rendering (for example - when navigating using a Link component to a page with that reusable component).

[shairez]

closing
context:
#3966 (comment)