Client-side Loaders?

I have an external

@xstate/store

@xstate/store

@xstate/store

@xstate/store which I use to keep track of some user preferences. Those preferences get persisted via cookies and loaded during

beforeLoad

beforeLoad

. What is the correct way to populate a client side store like xstate with those values from the server? I know I could:

  const { userPreferences } = Route.useLoaderData();

  useEffect(() => {
    preferencesStore.send({ event: "initialize", preferences: userPreferences });
  }, [userPreferences])

  const { userPreferences } = Route.useLoaderData();

  useEffect(() => {
    preferencesStore.send({ event: "initialize", preferences: userPreferences });
  }, [userPreferences])

  const { userPreferences } = Route.useLoaderData();

  useEffect(() => {
    preferencesStore.send({ event: "initialize", preferences: userPreferences });
  }, [userPreferences])

  const { userPreferences } = Route.useLoaderData();

  useEffect(() => {
    preferencesStore.send({ event: "initialize", preferences: userPreferences });
  }, [userPreferences])

but my gut tells me this is the wrong solution.

I could put

preferencesStore.send({ event: "initialize", preferences: userPreferences });

preferencesStore.send({ event: "initialize", preferences: userPreferences });

preferencesStore.send({ event: "initialize", preferences: userPreferences });

preferencesStore.send({ event: "initialize", preferences: userPreferences }); in the Route's

loader

loader

but that runs on both the client AND the server, correct? The

preferencesStore

preferencesStore

preferencesStore

preferencesStore should really only "exist" client side. WWYD?

No replies yetBe the first to reply to this messageJoin

Client-side Loaders?

Similar Threads

Similar Threads

Similar Threads