drawdb icon indicating copy to clipboard operation
drawdb copied to clipboard

[BUG] Fix impure state updates in DiagramContext and refactor Workspace

Open MOHITKOURAV01 opened this issue 1 month ago • 0 comments

Describe the bug DiagramContext.jsx contained impure state updates where side effects (like updating the undo/redo stack) were occurring directly inside state setter functions. This can lead to unpredictable behavior, double-invocation in React Strict Mode, and state inconsistencies. Additionally, the context value was not memoized, causing unnecessary re-renders for all consuming components. Workspace.jsx also contained mixed concerns, handling both UI layout and complex data persistence logic.

To Reproduce Steps to reproduce the behavior:

  1. Open src/context/DiagramContext.jsx.
  2. Observe addTable, deleteTable, etc., where setUndoStack is called inside setTables or setRelationships callbacks.
  3. Observe the value object passed to DiagramContext.Provider is created on every render without useMemo.

Expected behavior

  • State updates should be pure. Side effects like updating history (undo/redo) should happen outside of state setters.
  • Context values should be memoized to prevent performance degradation.
  • Data persistence logic should be separated from UI components for better maintainability.

Additional context I have implemented the following fixes:

  • Refactored DiagramContext.jsx to move side effects out of state updaters and added useMemo for the context value.
  • Extracted the diagram load/save/autosave logic from Workspace.jsx into a new custom hook src/hooks/useDiagramIO.js.
  • Simplified Workspace.jsx to focus on layout and component composition.

MOHITKOURAV01 avatar Nov 25 '25 20:11 MOHITKOURAV01