enforce lint rule hooks - poc

[maxy-shpfy]

Description

Added ESLint React Hooks plugin to improve code quality and catch potential issues with React hooks usage. This PR configures the plugin with recommended settings and adds specific rules for exhaustive dependencies, setState in effects, refs, and immutability.

The PR also fixes numerous hook dependency issues throughout the codebase to comply with the new linting rules, including:

• Adding missing dependencies to useEffect and useCallback hooks
• Using queueMicrotask to fix state updates in effects
• Correcting dependency arrays in various components

Additionally, added a new lint:all script and made the default lint command use the --quiet flag to ignore warn​ noise by default.

Current State

There are still ~27 violations in

src/components/Home/RunSection/RunSection.tsx
src/components/shared/Dialogs/ComponentDuplicateDialog.tsx
src/components/shared/FullscreenElement/FullscreenElement.tsx
src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx
src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
src/components/shared/ReactFlow/FlowSidebar/components/ComponentItem.tsx
src/hooks/useAutoSave.ts
src/hooks/useLoadPipelineRuns.ts
src/providers/BackendProvider.tsx
src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx
src/providers/ComponentSpecProvider.tsx
src/providers/ExecutionDataProvider.tsx
src/providers/PipelineRunsProvider.tsx

Most popular violation is react-hooks/set-state-in-effect​ e.g.

 useEffect(() => {
    if (triggerSave) {
      saveChanges();
      setTriggerSave(false);
    }
  }, [triggerSave, saveChanges]);

One of the workarounds for this is using queueMicrotask​:

  useEffect(() => {
    if (triggerSave) {
      queueMicrotask(() => {
        saveChanges();
        setTriggerSave(false);
      });
    }
  }, [triggerSave, saveChanges]);

But it would be better to rethink organization and useEffect usage. In most cases it should be possible to avoid using useEffect at all.

Other common violation is not using useQuery and using useEffect to trigger data fetch.

Most problematic is src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx​ - fixing violations there causing infinite loops.

In some cases fix may require more advanced changes to the code.

Type of Change

• Improvement
• Cleanup/Refactor

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

1. Run npm run lint to verify the code passes the new linting rules
2. Test the application functionality to ensure the hook dependency fixes don't introduce regressions

Additional Comments

The PR includes a commented-out autofix option for the exhaustive-deps rule that was intentionally left disabled as it may cause infinite loops in the current codebase. This could be useful for future mass-refactoring efforts.

[maxy-shpfy]

• enforce lint rule hooks - poc #1342 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.