Rooks

useIsomorphicEffect

About

A hook that resolves to useEffect on the server and useLayoutEffect on the client.

Examples

import "./styles.css";
import { useState } from "react";
import { useIsomorphicEffect } from "rooks";
 
function Component() {
  useIsomorphicEffect(() => {
    console.log("Rendered");
  }, []);
  return null;
}
 
const App = () => {
  const [shouldRender, enableRender] = useState(true);
  return (
    <div>
      <h1>Rook: useIsomorphicEffect Example</h1>
      <hr></hr>
 
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <br></br>
        <button onClick={() => enableRender(!shouldRender)}> Click me! </button>
        <p>Explore console</p>
        {shouldRender && <Component />}
      </div>
    </div>
  );
};
 
export default App;

Arguments

Argument valueTypeDescription
callbackfunctionCallback function to be called on mount

Returns

Returns useEffect when "window" is not in scope and useLayoutEffect in the browser

On this page