SolidJS•3w ago

Understanding Component Render Timings with Contexts and <Show />

Seems like I have a gap in my understanding of something with regards to render timing of components when using things like <Show> with contexts. I have the following:

const Foo = () => {
  // ...stuff
  return (
    <Chart>
      <LineSeries data={[...]} />
    </Chart>
  )
}

const Foo = () => {
  // ...stuff
  return (
    <Chart>
      <LineSeries data={[...]} />
    </Chart>
  )
}

The implementation of <Chart /> is the following:

export const ChartContext = createContext<Accessor<IChartApi>>();

export const useChart = () => {
  const ctx = useContext(ChartContext);

  if (!ctx) {
    throw new Error("Chart not found");
  }

  return ctx;
};

export const Chart = (props: ParentProps<ChartProps>) => {
  let chartContainer!: HTMLDivElement;

  const _props = mergeProps({
    width: 0,
    height: 0,
  }, props);

  const [chart, setChart] = createSignal<IChartApi>();

  onMount(() => {
    const chart = createChart(chartContainer, _props);
    props.onCreateChart?.(chart);
    setChart(chart);

    createEffect(() => {
      chart.applyOptions(_props);
    });

    onCleanup(() => {
      chart.remove();
    });
  });

  return (
    <div ref={chartContainer}>
      <Show when={chart()}>
        {(chart) => (
          <ChartContext.Provider value={chart}>
            {props.children}
          </ChartContext.Provider>
        )}
      </Show>
    </div>
  );
};

export const ChartContext = createContext<Accessor<IChartApi>>();

export const useChart = () => {
  const ctx = useContext(ChartContext);

  if (!ctx) {
    throw new Error("Chart not found");
  }

  return ctx;
};

export const Chart = (props: ParentProps<ChartProps>) => {
  let chartContainer!: HTMLDivElement;

  const _props = mergeProps({
    width: 0,
    height: 0,
  }, props);

  const [chart, setChart] = createSignal<IChartApi>();

  onMount(() => {
    const chart = createChart(chartContainer, _props);
    props.onCreateChart?.(chart);
    setChart(chart);

    createEffect(() => {
      chart.applyOptions(_props);
    });

    onCleanup(() => {
      chart.remove();
    });
  });

  return (
    <div ref={chartContainer}>
      <Show when={chart()}>
        {(chart) => (
          <ChartContext.Provider value={chart}>
            {props.children}
          </ChartContext.Provider>
        )}
      </Show>
    </div>
  );
};

And lastly, my <LineSeries /> component is the following:

import { useChart } from "../Chart";

export const LineSeries = (props: LineSeriesProps) => {
  const chart = useChart(); 
  const [local, rest] = splitProps(props, ["data", "onCreateSeries"]);

  onMount(() => {
    const lineSeries = chart().addSeries(LineSeriesType);
    local.onCreateSeries?.(lineSeries);

    createEffect(() => {
      lineSeries.setData(local.data);
    });

    createEffect(() => {
      lineSeries.applyOptions(rest);
    });

    onCleanup(() => {
      chart().removeSeries(lineSeries);
    });
  });

  return null
};

import { useChart } from "../Chart";

export const LineSeries = (props: LineSeriesProps) => {
  const chart = useChart(); 
  const [local, rest] = splitProps(props, ["data", "onCreateSeries"]);

  onMount(() => {
    const lineSeries = chart().addSeries(LineSeriesType);
    local.onCreateSeries?.(lineSeries);

    createEffect(() => {
      lineSeries.setData(local.data);
    });

    createEffect(() => {
      lineSeries.applyOptions(rest);
    });

    onCleanup(() => {
      chart().removeSeries(lineSeries);
    });
  });

  return null
};

The issue is, when I try to run my App component that is supposed to render the Chart and LineSeries, I get the following unexpected error:

chart.tsx:10 Uncaught (in promise) Error: Chart not found
    at useChart (chart.tsx:10:11)
    at _$$component.location (LineSeries.tsx?t=1746631191461:9:17)
    at @solid-refresh:25:42
    at untrack (chunk-VWOXEQUG.js?v=d146421a:484:12)
    at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
    at runComputation (chunk-VWOXEQUG.js?v=d146421a:761:22)
    at updateComputation (chunk-VWOXEQUG.js?v=d146421a:740:3)
    at createMemo (chunk-VWOXEQUG.js?v=d146421a:266:10)
    at [solid-refresh]LineSeries (@solid-refresh:22:20)

chart.tsx:10 Uncaught (in promise) Error: Chart not found
    at useChart (chart.tsx:10:11)
    at _$$component.location (LineSeries.tsx?t=1746631191461:9:17)
    at @solid-refresh:25:42
    at untrack (chunk-VWOXEQUG.js?v=d146421a:484:12)
    at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
    at runComputation (chunk-VWOXEQUG.js?v=d146421a:761:22)
    at updateComputation (chunk-VWOXEQUG.js?v=d146421a:740:3)
    at createMemo (chunk-VWOXEQUG.js?v=d146421a:266:10)
    at [solid-refresh]LineSeries (@solid-refresh:22:20)

This is unexpected to me because within the implementation of <Chart /> I am making use of the <Show /> component to prevent the showing of the children until the chart instance is ready and can be passed to the context. It appears as if there is some eager kind of rendering going on that I did not expect. Is there a best practice way to go about this intent I am trying to achieve? In my head, even though I pass <LineSeries /> as a child to <Chart /> in my call-site App component, I would expect <LineSeries /> to not render until the parent <Chart /> has done what it needs to do. I'm definitely suspecting a gap in my thinking somewhere here.

73 Replies

REEEEE•3w ago

it's probably because of your use of mergeProps and passing those values into createChart I would split props first to pull either the values you want out or at least the children The reason it's probably causing the issue is because the children are being read in some other part before the show

Gaming

Programming

Understanding Component Render Timings with Contexts and <Show />

Did you find this page helpful?