Confused about Next.js implementations

[FleetAdmiralJakob]

Hey, can someone show me how can I define a global observable the Legend way in Next.js (I'm using a client component), which I can update onClick.

AND

that's for me the part that I think I especially don't understand: How the hell I can show an image based on this observable?
The Show element didn't work somehow, or I'm rly stupid and how can I add a className based on this observable.

Thank you for your answers, because I'm really frustrated now and really don't want to go back to Zustand.

I always got hydration errors next.js crashed or it simply didn't work.

[matthewmturner]

Could you share some code, would be easier to review that way.

[FleetAdmiralJakob]

Okay, I can't use:

• enableLegendStateReact()
• the dev server of next

code

client component (page router):

import React, { useEffect, useRef, useState } from "react";
import Layout from "~/components/Layout";
import Image from "next/image";
import styles from "./settings.module.css";
import {temperatureUnit$, type TemperatureUnitType, windSpeedUnit$, type WindSpeedUnitType} from "~/states";
import {observer} from "@legendapp/state/react-components";

const Settings = observer(() => {
  const doneImage = "/assets/done.png";

  const handleTemperatureUnitClick = (unit: TemperatureUnitType) => {
    temperatureUnit$.set(unit);
  };
  const handleSpeedUnitClick = (unit: WindSpeedUnitType) => {
    windSpeedUnit$.set(unit);
  };

  const normalButtonClass = styles.normalbutton ? styles.normalbutton : "";

  return (
    <>
      <Layout title={"Settings"}>
        <div className="flex flex-col items-center w-full">
          <h1 className="flex mt-10 justify-center text-4xl font-bold">
            Settings
          </h1>
          <hr className="w-4/12 h-1.5 bg-[#2d3142] mt-9 rounded" />
          <div className="flex flex-col justify-center m-5">
            <h2 className="text-basic font-bold">Temperature units</h2>
            <button
              className={`${normalButtonClass} ${
                temperatureUnit$.get() === "Celsius" ? "border-2" : ""
              }`}
              onClick={() => handleTemperatureUnitClick("Celsius")}
            >
              <p className={styles.buttontext}>Celsius (°C)</p>
              {temperatureUnit$.get() === "Celsius" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
            <button
              className={`${normalButtonClass} ${
                temperatureUnit$.get() === "Fahrenheit" ? "border-2" : ""
              }`}
              onClick={() => handleTemperatureUnitClick("Fahrenheit")}
            >
              <p className={styles.buttontext}>Fahrenheit (°F)</p>
              {temperatureUnit$.get() === "Fahrenheit" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
          </div>

          <div className="flex flex-col justify-center m-5">
            <h2 className="text-basic font-bold">Wind speed units</h2>
            <button
              className={`${normalButtonClass} ${
                windSpeedUnit$.get() === "Miles per hour" ? "border-2" : ""
              }`}
              onClick={() => handleSpeedUnitClick("Miles per hour")}
            >
              <p className={styles.buttontext}>Miles per hour (mph)</p>
              {windSpeedUnit$.get() === "Miles per hour" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
            <button
              className={`${normalButtonClass} ${
                windSpeedUnit$.get() === "Kilometers per hour" ? "border-2" : ""
              }`}
              onClick={() => handleSpeedUnitClick("Kilometers per hour")}
            >
              <p className={styles.buttontext}>Kilometers per hour (km/h)</p>
              {windSpeedUnit$.get() === "Kilometers per hour" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
            <button
              className={`${normalButtonClass} ${
                windSpeedUnit$.get() === "Knots" ? "border-2" : ""
              }`}
              onClick={() => handleSpeedUnitClick("Knots")}
            >
              <p className={styles.buttontext}>Knots</p>
              {windSpeedUnit$.get() === "Knots" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
            <button
              className={`${normalButtonClass} ${
                windSpeedUnit$.get() === "Meters per second" ? "border-2" : ""
              }`}
              onClick={() => handleSpeedUnitClick("Meters per second")}
            >
              <p className={styles.buttontext}>Meters per second (m/s)</p>
              {windSpeedUnit$.get() === "Meters per second" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
            <button
              className={`${normalButtonClass} ${
                windSpeedUnit$.get() === "Beaufort" ? "border-2" : ""
              }`}
              onClick={() => handleSpeedUnitClick("Beaufort")}
            >
              <p className={styles.buttontext}>Beaufort</p>
              {windSpeedUnit$.get() === "Beaufort" && (
                <Image src={doneImage} alt="Checkmark" width={29} height={29} />
              )}
            </button>
          </div>
        </div>
      </Layout>
    </>
  );
});

export default Settings;

states.ts

import { observable } from "@legendapp/state";
import { persistObservable } from "@legendapp/state/persist";
import { ObservablePersistLocalStorage } from "@legendapp/state/persist-plugins/local-storage";

export type TemperatureUnitType = "Celsius" | "Fahrenheit";

export const temperatureUnit$ = observable<TemperatureUnitType>("Celsius");

persistObservable(temperatureUnit$, {
    local: "temperatureUnit",
    persistLocal: ObservablePersistLocalStorage,
});

export type WindSpeedUnitType = "Miles per hour" | "Kilometers per hour" | "Knots" | "Meters per second" | "Beaufort";

export const windSpeedUnit$ = observable<WindSpeedUnitType>("Miles per hour");

persistObservable(windSpeedUnit$, {
    local: "windSpeedUnit",
    persistLocal: ObservablePersistLocalStorage,
});

[jmeistrich]

Although there's a lot of duplication in the buttons, from reading it seems like that should work. In what way is it not working? Can you make a codesandbox that we can use to test?

enableLegendState is deprecated so not using that is good. I'm not sure what you mean that you can't use the next dev server?

[FleetAdmiralJakob]

I'm not sure what you mean that you can't use the next dev server?

@jmeistrich
Exactly, it gives me a hydration error but if I build it etc. not

[jmeistrich]

Oh, there can sometimes be a hydration error when using persistObservable because that is local-only state. It should run ok but just display a warning in development mode. To fix that you could remove the persistence, or make sure it's running client-only.

What we do is make sure our components that use persisted state run client-side only. See:
https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only

We have this useCanRender hook for this purpose:

import { observable } from '@legendapp/state';
import { enableReactUse } from '@legendapp/state/config/enableReactUse';
import { useMount } from '@legendapp/state/react';

enableReactUse();

const canRender = observable(false);

export function useCanRender(): boolean {
    useMount(() => {
        canRender.set(true);
    });
    return canRender.use();
}

[FleetAdmiralJakob]

No fix in future from Legend?

[jmeistrich]

We are investigating some hydration issues: #166 and #143. But persisting in local storage is a different issue because that data exists only on the client, so it's not possible for it to match what the server rendered. We may want to add this hook to the library for convenience. Or it's possible there's another way to solve this that I'm not aware of at the moment. Maybe someone else has a suggestion?

[FleetAdmiralJakob]

Great, cool! Should I open an issue for that because I can now live with this solution, but for the most popular React framework I think this can't be permanent?

[jmeistrich]

Yes, that would be great, thanks!