TanStackT
TanStack•2y ago•
6 replies
moderate-tomato

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>
  );
}
Was this page helpful?