New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add documentation on how to use client-hooks and improve errors #259
Comments
Here's a utility component I wrote for client-only hooks: "use client";
import { useIsClient } from "@uidotdev/usehooks";
const ClientOnly = ({
children,
placeholder,
}: {
children: React.ReactNode;
placeholder?: React.ReactNode;
}) => {
const isClient = useIsClient();
if (!isClient) {
return placeholder || null;
}
return children;
};
export default ClientOnly; Usage: <ClientOnly
placeholder={<div className="fixed inset-0 bg-black z-50" />}
>
<Preloader video={home.video as VideoType} />
</ClientOnly> |
I support this suggestion. What I find strange, if some of these hooks can ONLY really make sense on clients, why require the useIsClient hook or other wrappers? Could not useLocalStorage hook incorporate isClient tests internally? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After running into a issue using client hooks and server rendering, @tylermcginnis referenced/explained (thanks!) why that error is necessary: #218 (comment)
It turns out, that happened to multiple users:
Therefore the proposal is to:
useHooks advertises "server-safe" which is a bit misleading. I acknowledge, that it was a user error due to not fully understanding server render. useHooks could make life much easier for the users. My initial experience was pretty frustrating. (Remember Apple's "You're holding it wrong")
Thanks for providing this library.
The text was updated successfully, but these errors were encountered: