kentcdodds / kentcdodds/stop-runaway-react-effects
useFetch runaway effect not caught
- Dominant language
- JavaScript
- Stars
- 793
- Forks
- 12
- PR merge metrics
- No merged PRs in 30d
Description
- `stop-runaway-react-effects` version: 1.2.0
- `node` version: 10.15.3
- `npm` (or `yarn`) version: 6.9.0
Relevant code or config
```javascript
function useGetProjects() {
const projects = useFetch(endpoint, {
method: 'post',
body: JSON.stringify({ Token })
})
return projects
}
// useFetch
import { useEffect, useState } from 'react'
function useFetch(path, options) {
const [result, setResult] = useState(null)
useEffect(() => {
let shouldCancel = false
async function fetchData(path, options) {
const response = await fetch(path, options)
const result = await response.json()
if (!shouldCancel) {
setResult(result)
}
}
fetchData(path, options)
return () => {
shouldCancel = true
}
}, [path, options])
// ^ cause of runaway effect: options should be memoized
return result
}
```
Since the options object passed to `useFetch` is recreated every call and not memoized, this caused a runaway effect. I tried using this module to catch future accidents like this, but it does not seem to catch it.
What you did:
- Created `bootstrap-hijack.js` file from documentation
- Imported it in the root file (index.js)
- Tried importing in the relevant file (App.jsx)
What happened:
- The runaway hook was not caught
Reproduction repository:
I will try to get a repro repo together another time.
Problem description:
Suggested solution:
Contributor guide
Research direction
Start by inspecting the documented bootstrap-hijack.js setup and its imports in index.js and App.jsx. Reproduce the useFetch example with the recreated options object, then verify that the runaway effect is detected; the issue provides no reproduction repository or test file.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100