React18 Batching Fixer

#tool:memory read repository "react18-batching-progress"

#tool:memory write repository "react18-batching-progress" "file:[name]:status:[fixed|clean]"

// In an async method or setTimeout:
this.setState({ loading: true });     // → React re-renders immediately
// ... re-render happened, this.state.loading === true
const data = await fetchData();
if (this.state.loading) {             // ← reads the UPDATED state
  this.setState({ data, loading: false });
}

// In an async method or Promise:
this.setState({ loading: true });     // → BATCHED - no immediate re-render
// ... NO re-render yet, this.state.loading is STILL false
const data = await fetchData();
if (this.state.loading) {             // ← STILL false! The condition fails silently.
  this.setState({ data, loading: false }); // ← never called
}
// All setState calls flush TOGETHER at the end

# Async methods in class components - these are the primary risk zone
grep -rn "async\s\+\w\+\s*(.*)" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | head -50

# Arrow function async methods
grep -rn "=\s*async\s*(" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | head -30

# setState inside setTimeout
grep -rn -A10 "setTimeout" src/ --include="*.js" --include="*.jsx" | grep "setState" | grep -v "\.test\." 2>/dev/null

# setState in .then() callbacks
grep -rn -A5 "\.then\s*(" src/ --include="*.js" --include="*.jsx" | grep "this\.setState" | grep -v "\.test\." | head -20 2>/dev/null

# setState in .catch() callbacks
grep -rn -A5 "\.catch\s*(" src/ --include="*.js" --include="*.jsx" | grep "this\.setState" | grep -v "\.test\." | head -20 2>/dev/null

# document/window event handler setState
grep -rn -B5 "this\.setState" src/ --include="*.js" --include="*.jsx" | grep "addEventListener\|removeEventListener" | grep -v "\.test\." 2>/dev/null

async loadUser() {
  this.setState({ loading: true });
  const user = await fetchUser(this.props.id);
  if (this.state.loading) {           // ← BUG: loading never true here in React 18
    this.setState({ user, loading: false });
  }
}

async loadUser() {
  this.setState({ loading: true });
  const user = await fetchUser(this.props.id);
  // Don't read this.state after await - use functional update or direct set
  this.setState({ user, loading: false });
}

import { flushSync } from 'react-dom';

async loadUser() {
  flushSync(() => {
    this.setState({ loading: true });  // Forces immediate render
  });
  // NOW this.state.loading === true because re-render was synchronous
  const user = await fetchUser(this.props.id);
  this.setState({ user, loading: false });
}

handleSubmit() {
  this.setState({ submitting: true });   // batched
  submitForm(this.state.formData)
    .then(result => {
      this.setState({ result, submitting: false });   // batched with above!
    })
    .catch(err => {
      this.setState({ error: err, submitting: false });
    });
}

async handleSubmit() {
  this.setState({ submitting: true, result: null, error: null });
  try {
    const result = await submitForm(this.state.formData);
    this.setState({ result, submitting: false });
  } catch(err) {
    this.setState({ error: err, submitting: false });
  }
}

// User must see each step distinctly - loading, then processing, then done
async processOrder() {
  this.setState({ status: 'loading' });     // must render before next step
  await validateOrder();
  this.setState({ status: 'processing' }); // must render before next step
  await processPayment();
  this.setState({ status: 'done' });
}

import { flushSync } from 'react-dom';

async processOrder() {
  flushSync(() => this.setState({ status: 'loading' }));
  await validateOrder();
  flushSync(() => this.setState({ status: 'processing' }));
  await processPayment();
  this.setState({ status: 'done' });  // last one doesn't need flushSync
}

// Add to react-dom import (not react-dom/client)
import { flushSync } from 'react-dom';

import ReactDOM from 'react-dom';
// Add flushSync to the import:
import ReactDOM, { flushSync } from 'react-dom';
// OR:
import { flushSync } from 'react-dom';

// Test that asserted on intermediate state (React 17)
it('shows loading state', async () => {
  render(<UserCard userId="1" />);
  fireEvent.click(screen.getByText('Load'));
  expect(screen.getByText('Loading...')).toBeInTheDocument(); // ← may not render yet in React 18
  await waitFor(() => expect(screen.getByText('User Name')).toBeInTheDocument());
});

it('shows loading state', async () => {
  render(<UserCard userId="1" />);
  await act(async () => {
    fireEvent.click(screen.getByText('Load'));
  });
  // Check loading state appears - may need waitFor since batching may delay it
  await waitFor(() => expect(screen.getByText('Loading...')).toBeInTheDocument());
  await waitFor(() => expect(screen.getByText('User Name')).toBeInTheDocument());
});

# After fixing a file, verify no this.state reads after await remain
grep -A 20 "async " [filename] | grep "this\.state\." | head -10

echo "=== Checking for this.state reads after await ==="
grep -rn -A 30 "async\s" src/ --include="*.js" --include="*.jsx" | grep -B5 "this\.state\." | grep "await" | grep -v "\.test\." | wc -l
echo "potential batching reads remaining (aim for 0)"

cat >> .github/react18-audit.md << 'EOF'

## Automatic Batching Fix Status
- Async methods reviewed: [N]
- flushSync insertions: [N]
- Refactored (no flushSync needed): [N]
- Test patterns flagged for test-guardian: [N]
EOF

#tool:memory write repository "react18-batching-progress" "complete:flushSync-insertions:[N]"