SolidJSS
SolidJS•2y ago•
6 replies
marcusbuffett

createEffect is reactive, JSX isn't

export const SavedLineView = (props: { loading: Accessor<boolean> }) => {
  createEffect(() => {
    // This gets called with true, then false, the expected behavior
    console.log("What's the value here?", props.loading());
  });
  return (
    <Show
      // This doesn't update, it's always true (the initial value)
      when={props.loading()}
      fallback={
        <div class="row w-full justify-center pt-12">
          <Puff color={c.primaries[65]} />
        </div>
      }
    >
      <SidebarTemplate header={"Moves saved!"} bodyPadding actions={[]} />
    </Show>
  );
};

I have this code, where I'm accessing props.loading (which is an accessor created from createSignal), and then also accessing it in the JSX via Show. The createEffect reacts properly to the signal being updated, the JSX does not. I'm doing some weird stuff where the signal is created in response to a click, so it's maybe created with a different owner or something, but I didn't think it would matter the owner/tracking context when the signal is created, only when it's accessed. I basically thought that createEffect should be doing a very similar thing to <Show when={x()}/>, so I'm confused why one works and one doesn't.

Hoping for an idea of how components "get" reactivity, so that I could understand an issue like this from first principles
Was this page helpful?