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>
);
}
