#Provide more information in task

11 messages · Page 1 of 1 (latest)

valid halo
#

It would be really cool to provide more information when we track a signal like the previous state :

useTask$(({ track }) => {
  const { previous, next } = track(list);
  if (previous === undefined) animateEntry();
  if (next.length > previous.length) animateUp();
  if (next.length < previous.length) animateDown();
  return ({ previous, next }) => {
    if (next === undefined) animateLeave();
  }
})
frozen sorrel
#

you can do this yourself with a let. Doing this correctly would increase memory use even when it's not used so we're not going to do that in core.

let previous
useVisibleTask$(({ track }) => {
  const next = track(list);
  if (previous === undefined) animateEntry();
  if (next.length > previous.length) animateUp();
  if (next.length < previous.length) animateDown();
  previous = next
  return () => {
    animateLeave();
  }
})

(note that I changed it to visible task since it pertains to animation)

valid halo
#

I thought there were some potential side effect if we mutate a variable inside a component. Like won't it be reset if the component props are updated ?

frozen sorrel
# valid halo I thought there were some potential side effect if we mutate a variable inside a...

ah you're right, when the component reruns that will clear previous. So:

const t = useConstant({previous: undefined})
useVisibleTask$(({ track }) => {
  const next = track(list);
  if (t.previous === undefined) animateEntry();
  if (next.length > previous.length) animateUp();
  if (next.length < previous.length) animateDown();
  t.previous = next
  return () => {
    animateLeave();
  }
})

you can also use a signal but that's unnecessary

valid halo
#

I see, in the code above the cleanup would execute on every change right ? Not only on the last one.
I would have to create another task for cleaning up when the component is destroy ?

const t = useConstant({previous: undefined})
useVisibleTask$(({ track }) => {
  const next = track(list);
  if (t.previous === undefined) animateEntry();
  if (next.length > previous.length) animateUp();
  if (next.length < previous.length) animateDown();
  t.previous = next;
})
useVisibleTask$(() => {
  return () => animateLeave();
})
frozen sorrel
valid halo
#

Ok thanks. What the flow between task & rendering btw ?

Something like that ?

  1. state changes
  2. run cleanup
  3. render
  4. run task callback

I want to animate cards between two states, so I need to get the position of the cards before and after it renders.

frozen sorrel
#

do check it in v2 too

valid halo
#

Ok nice, and would an async cleanup block rendering until it's resolved?

frozen sorrel