Skip to content

Fix setState-in-effect cascading renders in App.tsx #4

Description

@satsdisco

Summary

ESLint flags 2 instances of setState called directly inside useEffect in App.tsx, causing cascading renders:

1. Draft restoration (line ~67)

useEffect(() => {
  const savedTitle = localStorage.getItem('samizdat_draft_title')
  if (savedTitle) setTitle(savedTitle)  // ← cascading render
  // ...
}, [])

2. Publish result handling (line ~154)

useEffect(() => {
  if (nostr.publishResult?.success) {
    setShowPublishModal(false)  // ← cascading render
  }
}, [nostr.publishResult])

Fix Approach

  1. Draft restoration: Use useState initializer functions (useState(() => localStorage.getItem(...))) instead of effect
  2. Publish result: Use useCallback or event-driven pattern instead of watching state in an effect

Acceptance Criteria

  • No react-hooks/set-state-in-effect ESLint errors
  • Draft restoration works on page load
  • Publish modal still closes on success
  • No visible UI flicker or regression

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions