STOP 🛑

STOP 🛑 Writing React Like this 😡 Part 2 Welcome to stop writing React like this 😠 If you work with React, you might be writing it wrong A common pattern that I see in React when fetching data is this: You create a state variable and it is empty at first. And then you have a fetch request inside of a useEffect callback. After it returns, you parse the JSON and then you set the result into the state. While technically this code should be alright, here are a few things that could go wrong with this code: 1. Race condition. Let's say the component somehow unmounts and remounts again while the fetch is running. This means another fetch request is sent. And since there's no guarantee which fetch request comes back first, you might have the wrong state displayed in your component. This is the reasoning behind the addition of the two renders in React 18 strict mode. 2. Bad UX. There is no caching. Every time this component gets unmounted and remounted again, we are fetching again. This leads to a lot of unnecessary requests to your backend and it's not a great user experience. 3. What if you need a loading, error state and so on? Now it's your job to manually add those states to this component. What a pain in the butt. In this case, I recommend using a third party library such as React Query to avoid all these headaches.