---
title: "30 seconds of code"
url: https://daily.dev/posts/30-seconds-of-code-cdb3ckfhq
source_url: https://www.30secondsofcode.org/react/s/use-body-scroll-lock
type: article
source: "30 seconds of code"
published: 2021-09-04T10:43:12.061Z
updated: 2021-10-07T14:17:10.317Z
tags: ["general-programming"]
reading_time: 1
upvotes: 20
comments: 2
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 30 seconds of code

**[30 seconds of code](https://daily.dev/sources/30seconds)** · 1 min read · 20 upvotes · 2 comments

## Summary

Use the useLayoutEffect() with an empty array as the second argument to execute the provided callback only once when the component is mounted. Use Window.getComputedStyle() to get the overflow value of the body element and store it in a variable. Enables body scroll locking.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.30secondsofcode.org/react/s/use-body-scroll-lock>

## Community discussion

Top comments from developers on daily.dev.

**@horace\_torvalds** · 0 upvotes

> i mean where was i not knowing this site

**@lorezz** · 0 upvotes

> Great stuff as always with 30 sec of code.
> Lovely

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#general-programming](https://daily.dev/tags/general-programming)

[View this post on daily.dev](https://daily.dev/posts/30-seconds-of-code-cdb3ckfhq)