Fantastic closures and how to find them in React
<p>This article is <a href="https://youtu.be/AhAGA5LUxek" rel="noopener ugc nofollow" target="_blank">available in video format</a>. Fewer details, but nice animations and voice instead of letters.</p>
<p>Also, this article is part of the <a href="https://www.advanced-react.com/" rel="noopener ugc nofollow" target="_blank">“Advanced React”</a> book. If you like it, you might like the book as well </p>
<h1>Table of content</h1>
<ul>
<li>The problem</li>
<li>JavaScript, scope, and closures</li>
<li>The stale closure problem</li>
<li>Stale closures in React: useCallback</li>
<li>Stale closures in React: Refs</li>
<li>Stale closures in React: React.memo</li>
<li>Escaping the closure trap with Refs</li>
</ul>
<p>Closures in JavaScript must be one of the most terrifying features of the language. Even the omniscient ChatGPT will tell you that. It’s also probably one of the most hidden language concepts. We use it every time we write any React code, most of the time without even realizing it. But there is no getting away from them in the end: if we want to write complex and performant React apps, we have to know closures.</p>
<p>So let’s dive into yet another code mystery, and in the process learn:</p>
<ul>
<li>What closures are, how they appear, and why we need them.</li>
<li>What a stale closure is, and why they occur.</li>
<li>What the common scenarios in React are that cause stale closures, and how to fight them.</li>
</ul>
<p>Warning: if you’ve never dealt with closures in React, this article might make your brain explode. Make sure to have enough chocolate with you to stimulate brain cells while you’re reading this.</p>
<p><a href="https://adevnadia.medium.com/fantastic-closures-and-how-to-find-them-in-react-d81f000919d2">Website</a></p>