Passive Layout Effect
@react-hook/passive-layout-effect
A React hook that uses useEffect() on the server and useLayoutEffect() in the browser
Hooks
react
react hook
passive layout effect
isomorphic layout effect
@react-hook/passive-layout-effect
Hooks
javascript
npm
frontend
open source
Stars
384
Weekly
1.4M
Open issues
5
Bundle
~25 kB
Installation
npm install @react-hook/passive-layout-effectCode example
import { usePassiveLayoutEffect } from "@react-hook/passive-layout-effect";
export function Example() {
const value = usePassiveLayoutEffect();
return <p>{String(value)}</p>;
}Pros & cons
Pros
- Actively maintained by Jared Lunde
- 1.4M weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 5 open issues on GitHub