@stihl-design-system/components/utils/useIsomorphicLayoutEffect.d.ts

Welcome to the STIHL Design System react component library.

import { useLayoutEffect } from 'react';
/**
 * A custom hook that conditionally uses `useLayoutEffect` or `useEffect` based on the environment.
 *
 * This hook is a workaround for the issue where `useLayoutEffect` causes a warning when used in environments
 * where there is no DOM, such as during server-side rendering (SSR). In these cases, `useEffect` is used instead,
 * which is safe for SSR.
 *
 * The need for this hook arises from the fact that `useLayoutEffect` is designed to run synchronously after all
 * DOM mutations. However, in a server environment where there is no DOM, using `useLayoutEffect` can trigger
 * warnings because the server cannot perform any DOM-related operations.
 *
 * By checking if the `window` object is available, we can determine whether we are in a browser (client) environment
 * or a server environment, and choose the appropriate hook accordingly.
 *
 * @link https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85?permalink_comment_id=5023665#gistcomment-5023665
 *
 * @example
 * import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 *
 * useIsomorphicLayoutEffect(() => {
 *   // Your effect logic here
 * }, [dependencies]);
 * */
export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;