Create useIsomorphicLayoutEffect Hook

React's useLayoutEffect hook runs synchronously after all DOM mutations but before the browser has painted. This is useful for tasks that need to measure or mutate the DOM immediately. However, useLayoutEffect can block rendering and potentially cause performance issues, especially in server-side rendering (SSR) environments where it doesn't exist. This challenge asks you to create an isomorphic useIsomorphicLayoutEffect hook that intelligently chooses between useLayoutEffect and useEffect based on the environment.

Problem Description

Your task is to implement a custom React hook named useIsomorphicLayoutEffect in TypeScript. This hook should behave identically to useLayoutEffect in a browser environment and identically to useEffect in a server-side rendering environment. This allows you to write code that benefits from synchronous DOM updates when available, without breaking SSR.

Key Requirements:

• The hook should be named useIsomorphicLayoutEffect.
• It must accept the same arguments as React.useLayoutEffect (a callback function and an optional dependency array).
• It should conditionally use React.useLayoutEffect when running in a browser (i.e., typeof window !== 'undefined').
• It should conditionally use React.useEffect when running in a server-side rendering environment.
• The hook should be typed correctly to accept functions with various return types (void, cleanup functions returning void, or cleanup functions returning nothing).

Expected Behavior:

• In a browser, useIsomorphicLayoutEffect will execute its callback after DOM mutations but before the browser paints.
• On the server, useIsomorphicLayoutEffect will execute its callback asynchronously after the initial render, just like useEffect.

Examples

Example 1: (Browser Environment)

import React, { useRef, useState } from 'react';
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; // Assume this is your custom hook

function MyComponent() {
  const [height, setHeight] = useState(0);
  const divRef = useRef<HTMLDivElement>(null);

  useIsomorphicLayoutEffect(() => {
    if (divRef.current) {
      // This will run synchronously in the browser after DOM update
      setHeight(divRef.current.offsetHeight);
      console.log('useIsomorphicLayoutEffect ran in browser');
    }
    return () => {
      console.log('Cleanup from useIsomorphicLayoutEffect');
    };
  }, []); // Empty dependency array means it runs only on mount and unmount

  return (
    <div ref={divRef} style={{ background: 'lightblue', padding: '20px' }}>
      The height of this div is: {height}px
    </div>
  );
}

export default MyComponent;

Expected Output (in browser console on mount):

useIsomorphicLayoutEffect ran in browser

Explanation: In a browser, useIsomorphicLayoutEffect delegates to useLayoutEffect, which executes the callback synchronously after the DOM is updated and before the browser repaints. This allows setHeight to be called immediately based on the rendered DOM.

Example 2: (Server-Side Rendering Environment)

If the above MyComponent were rendered on the server, the useIsomorphicLayoutEffect would delegate to useEffect.

Expected Output (in server logs, if applicable, or browser console on hydration):

// No immediate log from the effect's main callback on the server during initial render.
// The console.log('useIsomorphicLayoutEffect ran in browser') would *not* appear during server render.
// If hydration occurs in the browser, the effect might run again depending on React's behavior.

Explanation: On the server, useIsomorphicLayoutEffect delegates to useEffect. useEffect callbacks are not executed during server rendering. They run on the client after hydration. This prevents blocking the SSR process.

Example 3: (Dependencies Change)

import React, { useState } from 'react';
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

function Counter() {
  const [count, setCount] = useState(0);

  useIsomorphicLayoutEffect(() => {
    console.log(`Count updated to: ${count}`);
    // In a browser, this would run synchronously after the DOM update related to `count`.
    // On the server, it would run after hydration.
  }, [count]); // Re-run effect when `count` changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default Counter;

Expected Behavior:

• Browser: The console.log will appear synchronously after the paragraph displaying the count is updated.
• Server: The console.log will not appear during the initial server render. It might appear on the client after hydration if the initial render causes count to be something other than its initial state or if updates occur client-side.

Constraints

• You must use the React library.
• The solution must be written in TypeScript.
• The hook must be placed in a separate file, e.g., useIsomorphicLayoutEffect.ts.
• The solution should not rely on any external libraries beyond React.
• The hook should handle cleanup functions correctly, just like useLayoutEffect and useEffect.

Notes

Consider how to determine if you are in a browser environment. The standard JavaScript check for the existence of window is a good starting point. Think about the types you need to provide for the callback function. Remember that useLayoutEffect and useEffect have the same signature in terms of their arguments.