@silk-hq/components
Version:
UI Components by Silk
33 lines (31 loc) • 1.43 kB
text/typescript
/* eslint-disable */
// @ts-nocheck
import { useEffect, useLayoutEffect } from "react";
import { canUseDOM } from "./can-use-dom";
/**
* React currently throws a warning when using useLayoutEffect on the server. To
* get around it, we can conditionally useEffect on the server (no-op) and
* useLayoutEffect in the browser. We occasionally need useLayoutEffect to
* ensure we don't get a render flash for certain operations, but we may also
* need affected components to render on the server. One example is when setting
* a component's descendants to retrieve their index values.
*
* Important to note that using this hook as an escape hatch will break the
* eslint dependency warnings unless you rename the import to `useLayoutEffect`.
* Use sparingly only when the effect won't effect the rendered HTML to avoid
* any server/client mismatch.
*
* If a useLayoutEffect is needed and the result would create a mismatch, it's
* likely that the component in question shouldn't be rendered on the server at
* all, so a better approach would be to lazily render those in a parent
* component after client-side hydration.
*
* https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
* https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
*
* @param effect
* @param deps
*/
export const useIsomorphicLayoutEffect = canUseDOM()
? useLayoutEffect
: useEffect;