{
  "id": 3394820,
  "title": "The fuss with running a code ONLY once in React.js (after page load)",
  "url": "https://urgent.news/2026/08/26/the-fuss-with-running-a-code-only-once-in-react-js-after-page-load",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-26T01:10:41.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/midnqp/the-fuss-with-running-a-code-only-once-in-reactjs-after-page-load-jo7"
  },
  "original_language": "en",
  "account": "The article discusses the issue of running a specific piece of code only once in React.js, specifically after the page has loaded. It begins by introducing a file named _runOnce.tsx, which is a client-side component used for important client-side logic. The file can access `window.localStorage` but only when the `use client` directive is present.\n\nNext, the article explains a file named app/layout.tsx, which is located at the app root. This file is default server-side and should not be made client-side. It imports the RunOnce component and exports the RootLayout function, which receives the children as a parameter. The layout.tsx file should remain strictly server-side, and importing client-side components into it is advised.\n\nThe author then poses the question of why not write the run-only-once code in page.tsx instead. They explain that there is a reason for this, and they are writing this article to provide the answer. The `Page()` function may contain `useEffect` code, which causes the Page component to re-render. Code that re-renders will never be able to run a code only once.\n\nThe author also addresses the idea of using `useRef` to avoid re-rendering the `Page`. However, they state that this approach will not work if the `ref` is instantiated within the `Page` function, as it would get created every time with the re-render. To make the `useRef` route work, the ref would need to be passed through to the `Page` function from the root layout. If the `useRef()` is declared outside the `Page` function, it is considered a rookie error since `useRef` is a client-side construct, and the code will not compile.\n\nIn conclusion, the article aims to provide clarity on the matter and hopes that it will be helpful to readers. Questions are encouraged if any further clarification is needed.",
  "summary": "Firstly, filename here is _runOnce.tsx . This file here is a client-side component that allows for important client side logic. ' use client ' export default function RunOnce () { // access `window.localStorage` here. // this is only available with 'use client'. } Secondly, the filename is app/layout.tsx . This is at the app root. This file by default is server-side. And it is advised not to make…",
  "key_points": [
    "File runOnce.tsx used for client-side logic in React.js",
    "app/layout.tsx, server-side only, imports RunOnce component",
    "Page() function with useEffect prevents code from running once"
  ],
  "editors_take": "Placing run-once code in a separate client-side component like runOnce.tsx ensures it executes only once after page load, avoiding issues with re-renders that occur when using useEffect or useRef in the Page component.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}