Fix react-hooks/exhaustive-deps violations in BlockEditor component

Problem

The BlockEditor component currently disables the react-hooks/exhaustive-deps ESLint rule at the file level.

This hides multiple issues:

• useEffect hooks with missing dependencies
• An inline callback passed to a custom hook that is not memoized
• Suppressed lint warnings instead of addressing the root causes

As a result, React cannot reliably track when effects should re-run, and the intent of the hook dependencies is unclear.

---

Affected File

• apps/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx

---

Issues Identified

1. useEffect hooks missing required dependencies such as:

   • setValue
   • screens[activeScreen]?.changedByEditor
   • screens[activeScreen]?.payload properties

2. Callback passed to useFormatCodeMirrorValue is recreated on every render

3. File-level /* eslint-disable react-hooks/exhaustive-deps */ masks these issues

---

Proposed Solution

• Remove the file-level eslint-disable react-hooks/exhaustive-deps
• Add all accessed values to useEffect dependency arrays using a granular dependency pattern (specific nested properties instead of entire objects)
• Wrap the callback passed to useFormatCodeMirrorValue with useCallback and proper dependencies

This approach:

• Fixes the underlying dependency issues instead of suppressing them
• Avoids unnecessary re-renders by not depending on large objects
• Preserves existing component behavior
• Follows recommended React Hooks best practices

---

Scope

• Limit changes to BlockEditor.tsx only
• No refactors or behavior changes
• Focus exclusively on fixing exhaustive-deps violations

---

Testing

No code changes yet.

After implementation:

• ESLint should report no react-hooks/exhaustive-deps warnings

• TypeScript checks should pass

• Manual verification needed in UIKit Playground:

  • Screen switching
  • Code editing and formatting
  • No infinite re-render loops

---

Additional Notes

This issue addresses a single high-impact file. Similar fixes in other files should be handled incrementally in separate issues/PRs.

I plan to work on this issue and submit a PR if this approach is acceptable.

Start in apps/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx and inspect the useEffect hooks and useFormatCodeMirrorValue callback identified in the issue. Run ESLint and TypeScript checks, then manually verify screen switching, code editing, formatting, and the absence of infinite re-render loops. Done means the file-level disable is removed and no react-hooks/exhaustive-deps warnings remain.