Problem
The current implementation relies on deeply injecting Canvas-related attributes from workflowv2/index → CanvasPage → 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
Problem
The current implementation relies on deeply injecting Canvas-related attributes from
workflowv2/index→CanvasPage→ 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.
[createContext](https://react.dev/reference/react/createContext)to provide Canvas-related data.src/uithat consume these contexts without performing HTTP requests.src/uipurely declarative and framework-driven.src/ui, where they can use any required dependencies.Benefits
Notes