Files
30-seconds-of-code/snippets/useIsomporphicEffect.md
2022-06-08 12:56:09 +03:00

31 lines
739 B
Markdown

---
title: React useIsomporphicEffect hook
tags: hooks,effect
expertise: beginner
author: chalarangelo
cover: blog_images/jars-on-shelf-2.jpg
firstSeen: 2021-09-29T05:00:00-04:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Eesolves to `useEffect()` on the server and `useLayoutEffect()` on the client.
- Use `typeof` to check if the `Window` object is defined. If it is, return the `useLayoutEffect()`. Otherwise return `useEffect()`.
```jsx
const useIsomorphicEffect =
typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
```
```jsx
const MyApp = () => {
useIsomorphicEffect(() => {
window.console.log('Hello');
}, []);
return null;
};
ReactDOM.render(<MyApp />, document.getElementById('root'));
```