What is wrong with Math.random create Signal

This code:

const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}`)

const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}`)

produces different values on interface and in createEffect log, what is going on?

5 Replies

Madaxen86•3mo ago

This should give some insight 😉

const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}` + isServer)

const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}` + isServer)

gsoutzOP•3mo ago

I see isServer and isClient executes twice, but what is the best way to fix this?

Madaxen86•3mo ago

The inital value of the signal is create twice: Once on the server for SSR and then again on the client to make stuff reactive. And math.random() creates different values obviously. So to get around that you could a. disable SSR in the app config if you don't need it ... or ... b. render the component clientOnly A: would be like

//Random.tsx
import { createEffect, createSignal } from "solid-js";
import { isServer } from "solid-js/web";
import { clientOnly } from "@solidjs/start";

const Random = () => {
  const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}`);
  return (
    <>
      <p>{name()}</p>
    </>
  );
};
export default Random;

export const ClientRandom = clientOnly(() => import("./Random"));
//_____________
//your route
import { Suspense } from "solid-js";
import { ClientRandom } from "~/components/Random";
export default function Page() {
  return (
    <Suspense fallback={"Loading guests..."}>
      <ClientRandom />
    </Supsense>
  );
}

//Random.tsx
import { createEffect, createSignal } from "solid-js";
import { isServer } from "solid-js/web";
import { clientOnly } from "@solidjs/start";

const Random = () => {
  const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}`);
  return (
    <>
      <p>{name()}</p>
    </>
  );
};
export default Random;

export const ClientRandom = clientOnly(() => import("./Random"));
//_____________
//your route
import { Suspense } from "solid-js";
import { ClientRandom } from "~/components/Random";
export default function Page() {
  return (
    <Suspense fallback={"Loading guests..."}>
      <ClientRandom />
    </Supsense>
  );
}

gsoutzOP•3mo ago

thanks for the very detailed answer. One more thing, I have this for creating a session password:

const password = process.env.SESSION_SECRET ?? 
    Math.random().toString(16).slice(2) +
    Math.random().toString(16).slice(2) +
    Math.random().toString(16).slice(2) +
    Math.random().toString(16).slice(2)

const password = process.env.SESSION_SECRET ?? 
    Math.random().toString(16).slice(2) +
    Math.random().toString(16).slice(2) +
    Math.random().toString(16).slice(2) +
    Math.random().toString(16).slice(2)

Where should I put this so it is set once the server starts and never changes on every request, because when I put this at the top level of app.tsx, it changes with every request.

Madaxen86•3mo ago

Not possible. That’s why we use env variables.

Gaming

Programming

What is wrong with Math.random create Signal