Lifecycle & Effects
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 value | Type | Description |
|---|---|---|
| callback | function | Callback function to be called on mount |
Returns
Returns useEffect when "window" is not in scope and useLayoutEffect in the browser