eglove
eglove
PostsComments
SSolidJS
Created by eglove on 7/26/2024 in #support
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?
4 replies