T
TanStack•13mo ago
ratty-blush

Make Client Only component with SSR

Is there a way to make a component client only. In this example the use of localStorage throws an error during SSR. 
import React from "react";
import { Button } from "@/components/ui/button";

export function ClickCounter() {
  const [clicks, setClicks] = React.useState(() => {
    const storedClicks = localStorage.getItem("buttonClicks");
    return storedClicks ? parseInt(storedClicks, 10) : 0;
  });

  const handleClick = () => {
    const newClicks = clicks + 1;
    setClicks(newClicks);
    localStorage.setItem("buttonClicks", newClicks.toString());
  };

  return (
    <Button onClick={handleClick}>Click me (Clicked {clicks} times)</Button>
  );
}
import React from "react";
import { Button } from "@/components/ui/button";

export function ClickCounter() {
  const [clicks, setClicks] = React.useState(() => {
    const storedClicks = localStorage.getItem("buttonClicks");
    return storedClicks ? parseInt(storedClicks, 10) : 0;
  });

  const handleClick = () => {
    const newClicks = clicks + 1;
    setClicks(newClicks);
    localStorage.setItem("buttonClicks", newClicks.toString());
  };

  return (
    <Button onClick={handleClick}>Click me (Clicked {clicks} times)</Button>
  );
}
1 Reply
fair-rose
fair-rose•13mo ago
You'll need to provide an alternative render path for SSR So you'll either need an isomorphic localStorage wrapper, or just check if (document !== 'undefined') { use localStorage }

Did you find this page helpful?