useIsomorphicLayoutEffect

A React hook that is similar to useLayoutEffect, but can be safely used on the server.

On the server, React emits a warning when calling useLayoutEffect. This is because neither useLayoutEffect nor useEffect run on the server. We use this safe version which suppresses the warning by replacing it with a noop on the server.

Installation

npm install @madeinhaus/hooks

yarn add @madeinhaus/hooks

pnpm add @madeinhaus/hooks

Import

import { useIsomorphicLayoutEffect } from '@madeinhaus/hooks';

Parameters

• effect (EffectCallback): A function that will be called before the browser repaints the screen.
• deps (DependencyList, optional): An array of dependencies that will trigger the effect when they change. If not specified, the effect will run after every render.

Returns

• (void): This hook does not return anything.

Usage

import { useIsomorphicLayoutEffect } from '@madeinhaus/hooks';
 
function MyComponent() {
  useIsomorphicLayoutEffect(() => {
    console.log('Component has rendered');
  });
 
  return <div>Hello, world!</div>;
}

In this example, we import the useIsomorphicLayoutEffect hook from the @madeinhaus/hooks package and use it to log a message before the browser repaints the screen.