Make the child of a memoized component reactive

I have this in a parent:

<For each={prices()}>
    {(price, index) => {
        return <tr class="grid grid-cols-4">
            <td><RelativeTime millis={price.milliseconds}/></td>
        </tr>
    }}
</For>

<For each={prices()}>
    {(price, index) => {
        return <tr class="grid grid-cols-4">
            <td><RelativeTime millis={price.milliseconds}/></td>
        </tr>
    }}
</For>

And this is RelativeTime:

function getRelativeTime(millis: number) {
  const diff = DateTime.now().diff(DateTime.fromMillis(millis)).milliseconds;

  return ms(diff > 0 ? diff : 0, { long: true });
}

export function RelativeTime({
  millis,
  updateInterval = 1000,
}: CurrencyProperties) {
  const [currentMillis, setCurrentMillis] = createSignal(getRelativeTime(millis));

  createEffect(() => {
    const interval = setInterval(() => {
      setCurrentMillis(getRelativeTime(millis));
    }, updateInterval);


    onCleanup(() => {
      clearInterval(interval)
    })
  });

  return currentMillis();
}

function getRelativeTime(millis: number) {
  const diff = DateTime.now().diff(DateTime.fromMillis(millis)).milliseconds;

  return ms(diff > 0 ? diff : 0, { long: true });
}

export function RelativeTime({
  millis,
  updateInterval = 1000,
}: CurrencyProperties) {
  const [currentMillis, setCurrentMillis] = createSignal(getRelativeTime(millis));

  createEffect(() => {
    const interval = setInterval(() => {
      setCurrentMillis(getRelativeTime(millis));
    }, updateInterval);


    onCleanup(() => {
      clearInterval(interval)
    })
  });

  return currentMillis();
}

Basically I want to take a memoized value and keep chaning the child component to show the current relative time. Is this possible?

3 Replies

eglove•2mo ago

It looks like this fixes it. Change this: return currentMillis(); To this: return <>{currentMillis()}</>;

Madaxen86•2mo ago

Jep. Now you have JSX as return. Otherwise you could also just

return currentMillis;

return currentMillis;

Without the brackets. Then you would be returning a function which would also be reactive.

eglove•2mo ago

"Without the brackets. Then you would be returning a function which would also be reactive." This makes this make sense. Thanks!

Gaming

Programming

Make the child of a memoized component reactive