Voice Dictation for Stack Overflow: Questions, Answers & Code Explanations

Contextli outputs:

## React useEffect causing infinite loop when fetching data

I'm trying to fetch data when my component mounts, but it's causing an infinite loop.

### My Code
```jsx
const [data, setData] = useState(null);

useEffect(() => {
  fetchData().then(setData);
}, [data]); // This causes infinite loop
```

### Expected Behavior
Fetch should run once on mount.

### Actual Behavior
Component re-renders infinitely.

### What I've Tried
- Removing dependency array → ESLint warning about missing dependencies
- Empty dependency array `[]` → Works but unclear if correct

### Question
What's the correct way to fetch data once on mount while satisfying ESLint rules?

Contextli outputs:

## Solution

The infinite loop happens because `data` is in the dependency array. When `setData` updates `data`, it triggers the effect again, which fetches and updates again, forever.

### Fixed Code
```jsx
const [data, setData] = useState(null);

useEffect(() => {
  fetchData().then(setData);
}, []); // Empty array = run once on mount
```

### Why This Works
- Empty dependency array `[]` means "run only on mount"
- `setData` function identity is stable (won't trigger re-runs)
- The lint warning is a false positive for this pattern

### About the ESLint Warning
You can either:
1. Disable the rule for this line: `// eslint-disable-next-line react-hooks/exhaustive-deps`
2. Or structure your code so dependencies are genuinely stable

The empty array pattern is idiomatic React for fetch-on-mount.