eclipse-cdt-cloud / eclipse-cdt-cloud/vscode-memory-inspector
Proposal: Use React context instead of prop drilling for accessing shared state
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 25
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 8
Description
**Description**
As mentioned in [this discussion](https://github.com/eclipse-cdt-cloud/vscode-memory-inspector/pull/69#discussion_r1497987737) by @colin-grant-work we currently need a lot of `props drilling` to pass the relevant data to our components.
This issue/the amount of required prop drilling potentially increases with each new feature (e.g #70, #51).
As mentiond by @planger in the discussion we ideally would like to keep handling of messenger events in a central place on both ends (i.e. the App for the webview part). So we should look into a different approach of sharing central state (and update functions/hooks) with different components.
React provides the [Context API](https://react.dev/learn/passing-data-deeply-with-context) for this.
The `App` component could be refactored into a context provider that exposes the `MemoryAppState` and update functions/hooks.
Nested components can then simply access the provided context via the `context` property.
**Additional information**
I have created a draft PR for this proposal: https://github.com/eclipse-cdt-cloud/vscode-memory-inspector/pull/85
Contributor guide
Assessment
This issue has not been assessed yet.