Skip to content

Replace Canvas Attribute Injection with React Context #3846

@forestileao

Description

@forestileao

Problem
The current implementation relies on deeply injecting Canvas-related attributes from workflowv2/indexCanvasPage → downstream internal components. This creates tight coupling, makes the component tree harder to reason about, and contributes to unnecessary re-renders.

Proposed Solution
Replace prop-based deep injection with React Context.

  • Introduce context(s) using [createContext](https://react.dev/reference/react/createContext) to provide Canvas-related data.
  • Define interfaces within src/ui that consume these contexts without performing HTTP requests.
  • Keep src/ui purely declarative and framework-driven.
  • Move the actual implementations (including any side effects or HTTP logic) outside src/ui, where they can use any required dependencies.

Benefits

  • Reduces prop drilling and improves component encapsulation
  • Minimizes unnecessary re-renders
  • Simplifies development and improves maintainability
  • Creates a clearer separation between UI contracts and implementation details

Notes

  • Ensure contexts are scoped appropriately to avoid over-rendering consumers
  • Consider splitting contexts if different concerns update at different frequencies

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions