eclipse-cdt-cloud / eclipse-cdt-cloud/vscode-memory-inspector

Proposal: Use React context instead of prop drilling for accessing shared state

Open
#84 0 comments 0 reactions 1 assignee Claimed by @tortmayr View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.