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!

[Tehnix]

I've currently been using the following, in order to avoid hydration errors for Next.js (I am building for static export though, so no idea how it works with SSR):

import { Selector } from '@legendapp/state';
// eslint-disable-next-line no-restricted-imports
import { useObservable, useSelector as useSelectorInternal, UseSelectorOptions } from '@legendapp/state/react';
import { useMount } from '@legendapp/state/react';

/**
 * Hook to track if the component can render.
 *
 * Returns true if the component can render, false otherwise.
 *
 * https://github.com/LegendApp/legend-state/discussions/168#discussioncomment-6616457
 */
function useCanRender(): boolean {
  const canRenderState = useObservable(false);
  const canRender = useSelectorInternal(canRenderState);
  useMount(() => {
    canRenderState.set(true);
  });
  return canRender;
}

/**
 * Workaround to avoid hydration errors when using the useSelector hook.
 *
 * https://github.com/LegendApp/legend-state/discussions/168#discussioncomment-6616457
 */
export function useSelector<T>(selector: Selector<T>, options?: UseSelectorOptions): T | null {
  const canRender = useCanRender();
  const value = useSelectorInternal(selector, options);
  return canRender ? value : null;
}

This uses the trick from #168 (reply in thread) where we first check if the component has been mounted (only happens on Client-side) and only then returns the value from the observable.

An unfortunate side-effect is that all selectors can now be null so you'll have to handle that.

The canRenderState = useObservable(false) needs to be in each useCanRender unfortunately, since if it was global, then switching to a different page would cause hydration issues again.

I've then disabled using useSelector directly from @legendapp/state/react via an eslint rule:

{
  // ...
  rules: [
    {
      name: '@legendapp/state/react',
      importNames: ['useSelector'],
      message: 'Please use useSelector from @/hooks/use-selector instead which avoids hydration errors.',
    },
  ],
  // ...
}

It definitely doesn't feel ideal, but the hydration issues were causing bugs so it'll have to do until there's a better approach :/

[FleetAdmiralJakob]

@jmeistrich Is this an option to build this inside legendstate?