Best pattern for seamlessly updating data for the lazy's?

💙Intermediate📚Libraries

Solid API

I want to easily sync my local state with remote without causing too much rerenders - there's a lot of tabular-ish data. As I understand it

createResource()

createResource()

gets its entire object replaced when you do

refetch()

refetch()

causing a full rerender
there's

reconcile()

reconcile()

but this only applies to stores.
and for my usecase I also need a preprocessing stage that remaps some field names and adds a field to another object.

Here's something very similar to what I currently have, but something about this being in a

createEffect

createEffect

doesn't sit right with me and I'm not entirely familiar with stores. I didn't notice anything more about this in the docs.
Note I used tanstack-query but to my knowledge using it alone doesn't seamlessly keep state and still triggers a lot of rerenders

const STATE_POLL_INTERVAL = 3000;

export const LiveStats: Component = () => {
  const query = useQuery(() => ({
    queryKey: ["someFetch"],
    queryFn: remoteFetch,  // just a simple wrapper around fetch()
    refetchInterval: STATE_POLL_INTERVAL,
  }));
  const [statsStore, setStatsStore] = createStore<{ value: TableState | null }>({ value: null });
  createEffect(() => {
    const data = query.data;
    if (data === null || data === undefined) {
      return;
    }

    const newState = evaluateState(  // this always returns TableState
      extractNames(data),
      extractState(data),
      extractTimestampToUnix(data),
    );
    setStatsStore("value", reconcile(newState));
  });

const STATE_POLL_INTERVAL = 3000;

export const LiveStats: Component = () => {
  const query = useQuery(() => ({
    queryKey: ["someFetch"],
    queryFn: remoteFetch,  // just a simple wrapper around fetch()
    refetchInterval: STATE_POLL_INTERVAL,
  }));
  const [statsStore, setStatsStore] = createStore<{ value: TableState | null }>({ value: null });
  createEffect(() => {
    const data = query.data;
    if (data === null || data === undefined) {
      return;
    }

    const newState = evaluateState(  // this always returns TableState
      extractNames(data),
      extractState(data),
      extractTimestampToUnix(data),
    );
    setStatsStore("value", reconcile(newState));
  });

SolidJS•5w ago•

8 replies

Meten

Best pattern for seamlessly updating data for the lazy's?

💙Intermediate📚Libraries

Solid API

I want to easily sync my local state with remote without causing too much rerenders - there's a lot of tabular-ish data. As I understand it

createResource()

createResource()

gets its entire object replaced when you do

refetch()

refetch()

causing a full rerender
there's

reconcile()

reconcile()

createEffect

createEffect

const STATE_POLL_INTERVAL = 3000;

export const LiveStats: Component = () => {
  const query = useQuery(() => ({
    queryKey: ["someFetch"],
    queryFn: remoteFetch,  // just a simple wrapper around fetch()
    refetchInterval: STATE_POLL_INTERVAL,
  }));
  const [statsStore, setStatsStore] = createStore<{ value: TableState | null }>({ value: null });
  createEffect(() => {
    const data = query.data;
    if (data === null || data === undefined) {
      return;
    }

    const newState = evaluateState(  // this always returns TableState
      extractNames(data),
      extractState(data),
      extractTimestampToUnix(data),
    );
    setStatsStore("value", reconcile(newState));
  });

const STATE_POLL_INTERVAL = 3000;

export const LiveStats: Component = () => {
  const query = useQuery(() => ({
    queryKey: ["someFetch"],
    queryFn: remoteFetch,  // just a simple wrapper around fetch()
    refetchInterval: STATE_POLL_INTERVAL,
  }));
  const [statsStore, setStatsStore] = createStore<{ value: TableState | null }>({ value: null });
  createEffect(() => {
    const data = query.data;
    if (data === null || data === undefined) {
      return;
    }

    const newState = evaluateState(  // this always returns TableState
      extractNames(data),
      extractState(data),
      extractTimestampToUnix(data),
    );
    setStatsStore("value", reconcile(newState));
  });

Best pattern for seamlessly updating data for the lazy's?

Similar Threads

Best pattern for seamlessly updating data for the lazy's?

Similar Threads

Similar Threads

Similar Threads