kentcdodds / kentcdodds/stop-runaway-react-effects

useFetch runaway effect not caught

Open
#7 4 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.