mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-11 05:05:07 -05:00
3925b73d32
Strict improvement because we avoid the flash on clientside navigation. One practical bug was scroll restoration between tournament teams list and user page. When user pressed back they ended up at the bottom of the page because the placeholder (smaller height than actual content) rendered. With useHydrated this placeholder is no longer rendered for client side navigations.
33 lines
842 B
TypeScript
33 lines
842 B
TypeScript
import * as React from "react";
|
|
|
|
// credits: https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts
|
|
|
|
function subscribe() {
|
|
return () => {};
|
|
}
|
|
|
|
/**
|
|
* Return a boolean indicating if the JS has been hydrated already.
|
|
* When doing Server-Side Rendering, the result will always be false.
|
|
* When doing Client-Side Rendering, the result will always be false on the
|
|
* first render and true from then on. Even if a new component renders it will
|
|
* always start with true.
|
|
*
|
|
* Example: Disable a button that needs JS to work.
|
|
* ```tsx
|
|
* let hydrated = useHydrated();
|
|
* return (
|
|
* <button type="button" disabled={!hydrated} onClick={doSomethingCustom}>
|
|
* Click me
|
|
* </button>
|
|
* );
|
|
* ```
|
|
*/
|
|
export function useHydrated() {
|
|
return React.useSyncExternalStore(
|
|
subscribe,
|
|
() => true,
|
|
() => false,
|
|
);
|
|
}
|