[✨] Conditional hooks

[wmertens]

Is your feature request related to a problem?

Sometimes you have to run a hook even if you know you don't need it, using resources for no reason.

Describe the solution you'd like

How about a hook that starts a deeper context and that optionally runs?
e.g.

declare function useConditional<T>(condition: boolean, ifTrue: T | () => T, ifFalse: T | () => T): T

And within each callback the rules of hooks still apply

const Foo = component$(props => {
  const givenSignal = props['bind:selected']
  const signal = useConditional(!!givenSignal, givenSignal, () => useSignal(false))
})

So useConditional here makes a new signal or returns the given one.
It creates 2 hook contexts that are filled in lazily. The callbacks run within one of the contexts.

Describe alternatives you've considered

You can work around it with child components etc, but that's pretty complex to do.

Additional context

No response

[wmertens]

Another use case: run a visible task only when a condition is true. That way there's no JS loading on the client if it's not needed.

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.