Skip to main content

useIsomorphicLayoutEffect

Importing useIsomorphicLayoutEffect Hook​

import { useIsomorphicLayoutEffect } from '@ciceksepeti/cui-hooks';

Example​

info

useIsomorphicLayoutEffect() hook interchanges between use useLayoutEffect() and useEffect() hooks depending on typeof document.

If typeof document returns 'undefined' useLayoutEffect() hook will be called, otherwise useEffect() hook will be called.

tip

To learn more about differences please visit React JS useEffect and useEffect and useLayoutEffect reference pages.
import React, { useState } from 'react';
import { useIsomorphicLayoutEffect } from '@ciceksepeti/cui-hooks';

export const IsomorphicLayoutEffect = () => {
  const [text, setText] = useState('');

  useIsomorphicLayoutEffect(() => {
    setText('useIsomorphicLayoutEffect Called');
  }, []);

  return <div>{text}</div>;
};

Preview​

PREVIEW
useIsomorphicLayoutEffect
Result: