React 18 and “my useEffects run twice”

Ever since React 18 has been released I see a lot of confusion around the idea of components mounting twice in strict mode during development. This is important, because it will help you ensure your code is ready for concurrent features. It left a lot of people confused, however; on why their code is “acting weird” and sadly I find most answers pretty lacking, ranging from a confrontational “your code is bad” to a not always helpful web socket example. Sure web sockets are a great example, but most questions I find are around a basic HTTP GET request and no one seems to answer that…