4 ms·
This should be number 1 on the list, and it's wrong. Specifically: React.useEffect(() => { // Create an async function... async function runEf
by wokwokwok 4y ago
This should be number 1 on the list, and it's wrong.
Specifically:
React.useEffect(() => {
// Create an async function...
async function runEffect() {
const url = `${API}/get-profile?id=${userId}`;
const res = await fetch(url);
const json = await res.json(); <-- OK
setUser(json); <--- Wrong.
}
```
This is, hands down, the #1 mistake that react developers make. I've seen it literally in every react code base I've ever opened (if the code base had any kind of `fetch` in it).
It's covered in the documentation now, explicitly:
https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data https://beta.reactjs.org/learn/synchronizing-with-effects#fe...
This is a prime example of a sharp edge with react hooks; it's a very very common pattern, but because people don't understand what's going on, they do it wrong naively; and even when you do know it's wrong, it's a rare edge-case that causes an invisible bug ("Tried to update a component that wasn't mounted...") and makes code messy and hard to read.
The tldr should be: Do not use async effects. Use suspense.
- creamyhorror 4y agoThe section in the beta docs you linked to shows an async function startFetching() which does setTodos(json). How does that reconcile with you saying that setUser(json) is wrong?
- crooked-v 4y ago> Do not use async effects. Use suspense. I have to wonder how much pain would have been saved if the React team had just shipped a `usePromise` hook years ago.
- HeavyFeather 4y agoThe first thing I noticed looking at React after Svelte was that Svelte had syntax for promises from v1 while dealing with Promises in "the most popular framework on the plane" is still a PITA. "await blocks" on http://web.archive.org/web/20180103230006/http://svelte.technology/ http://web.archive.org/web/20180103230006/http://svelte.tech...
- nh2 4y ago> It's covered in the documentation now, explicitly: > Do not use async effects. Use suspense. The linked documentation does not mention the word "suspense". Do you have a link that combines these two topics? Instead the React docs explain a workaround that leads to completely different network request behaviour across development and production: > In development, you will see two fetches in the Network tab. > In production, there will only be one request. The proposed solution in the docs now: > useSomeDataLibrary() without saying what that "some data library" could be.