<h1 id="components-render-twice">Components render twice<a aria-hidden="true" class="anchor-heading icon-link" href="#components-render-twice"></a></h1>
<h1 id="react-components-render-twice---any-way-to-fix-this"><a href="https://www.heissenberger.at/en/blog/react-components-reder-twice/">React Components render twice - any way to fix this?</a><a aria-hidden="true" class="anchor-heading icon-link" href="#react-components-render-twice---any-way-to-fix-this"></a></h1>
<blockquote>
<p>The reason why this happens is an intentional feature of the React.StrictMode. It<strong> only happens in development mode</strong> and should help to find accidental side effects in the render phase.</p>
</blockquote>
<h2 id="what-is-happening-behind-the-scenes">What is happening behind the scenes?<a aria-hidden="true" class="anchor-heading icon-link" href="#what-is-happening-behind-the-scenes"></a></h2>
<p>The main reason is <code>React.StrictMode</code> which was introduced in version 16.3.0. Back then it only could be used for class components. With the release of 16.8.0 it is also applied for hooks.</p>
<h2 id="why-should-i-use-reactstrictmode">Why should I use React.StrictMode?<a aria-hidden="true" class="anchor-heading icon-link" href="#why-should-i-use-reactstrictmode"></a></h2>
<p>React will soon provide a new <a href="https://reactjs.org/docs/concurrent-mode-intro.html"><strong>Concurrent Mode</strong></a> which will break render work into multiple parts. Pausing and resuming the work between this parts should avoid the blocking of the browsers main thread.</p>
<blockquote>
<p>This means that the render phase could be invoked multiple times and should be a Pure Function without any side effects!</p>
</blockquote>

React Components render twice - any way to fix this?

Components render twice


Hi there 👋. I'm a Front-end developer.

---

> I've often described my motivation for building software to others using imagery: I like to go find a secluded beach, build a large, magnificent sand castle, and then walk away. Will anyone notice? Probably not. Will the waves eventually destroy it? Yep. Did I still get immense satisfaction? Absolutely.
>
> — [aliasxneo](https://news.ycombinator.com/item?id=41497113)

> “Motivation often comes after starting, not before. Action produces momentum.”
>
> — James Clear

> Focus is more about **not** keeping busy when you need to wait for something.  
> Eat the boredom for a minute.
>
> — [[life-tips#wodenokoto]]

> [4 minutes run hard enough to push heart rate to 90%, 3 minutes recover, repeat 4 times](https://news.ycombinator.com/item?id=34213181)
>
> - https://www.ntnu.edu/cerg/advice
> - [Get running with Couch to 5K](https://www.nhs.uk/live-well/exercise/running-and-aerobic-exercises/get-running-with-couch-to-5k/)

> [recommended routine - bodyweightfitness](https://www.reddit.com/r/bodyweightfitness/wiki/kb/recommended_routine/) - I Don't Have This Much Time!
>
> - Don't workout at all (saves anywhere from 20 to 60 minutes, but really, really, really, really, really, really, really, really, really not recommended)

> [Just 4 pages a day. It really adds up.](https://news.ycombinator.com/item?id=34779980)

> I think it should be everyone's primary focus to sleep well, drink water, get outside, get active, and eat generally decently. I hate to say it, but if you're not eating a good amount of vegetables and fruit, decent protein, sleep, etc, no amount of XYZ will catch up to that detriment.
>
> — [CE02](https://news.ycombinator.com/item?id=35056071)

> Before leaving for the day I leave a comment in code: I’m working on this, need to do A, B C… to get it working.
>
> — [makz](https://news.ycombinator.com/item?id=40744916)

---

## What I read in past

- [[What I read in 2024|journal.what-i-read-in]]
  - [[2023|journal.what-i-read-in.2023]]
  - [[2022|journal.what-i-read-in.2022]]
- 📝 [Gists](https://gist.github.com/Luke-SNAW)
- 📜 [Journals](https://luke-snaw.github.io/Luke-SNAW__netlify-CMS.github.io/)

---

- [[journal.what-i-struggled-brag-in]]
