8000 chore: refactor ExplorerProvider to use context selector by ZeRego · Pull Request #3108 · lightdash/lightdash · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

chore: refactor ExplorerProvider to use context selector #3108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Aug 31, 2022
Merged

chore: refactor ExplorerProvider to use context selector #3108

merged 4 commits into from
Aug 31, 2022

Conversation

ZeRego
Copy link
Collaborator
@ZeRego ZeRego commented Aug 30, 2022 •
edited
Loading

Related to: #2997

Description:

Main problem:
useContext doesn't let you subscribe to a part of the context value (or some memoized selector) without fully re-rendering.
Issue being tracked here: facebook/react#14110
There is a proposal under development/review reactjs/rfcs#119
So in this PR I'm using a library that polyfills the proposal so once it's introduced in react we can easily migrate.
Library: https://github.com/dai-shi/use-context-selector

Before:

    const {
        state: { isEditMode, savedChart },
    } = useExplorer();

After:

    const isEditMode = useContextSelector(
        Context,
        (context) => context!.state.isEditMode,
    );
    const savedChart = useContextSelector(
        Context,
        (context) => context!.state.savedChart,
    );

Top 3 providers that need to be changed:

  • AppProvider
  • ExplorerProvider
  • VisualizationProvider

I can make a PR for each one since it implies changes in lots of files and avoid merge conflicts. I can also make it backwards compatible so any existing PR merged would still be compatible ( it would still have bad performance )

This PR only refactors ExplorerProvider.

@owlas owlas requested a deployment to chore/stop-explorer-provider-updates-to-rerender-entire-page - jaffle_db PR #3108 August 30, 2022 17:31 — with Render Abandoned
@netlify
Copy link
netlify bot commented Aug 30, 2022 •
edited
Loading

✅ Deploy Preview for peaceful-bassi-cbf284 canceled.

Name Link
🔨 Latest commit 6bece78
🔍 Latest deploy log https://app.netlify.com/sites/peaceful-bassi-cbf284/deploys/630f76b5a7202a0008bacee5

@rephus
Copy link
Collaborator
rephus commented Aug 31, 2022

How long do you think it will take for reactjs to implement the solution ? because the issue was created on 2019 and last comment was on 2021...

@ZeRego
Copy link
Collaborator Author
ZeRego commented Aug 31, 2022

How long do you think it will take for reactjs to implement the solution ? because the issue was created on 2019 and last comment was on 2021...

@rephus No idea 🤷 hopefully in react 19 since this is a really obvious problem.
Our other option is to introduce a state management library like redux or mobx.

@ZeRego ZeRego mentioned this pull request Aug 31, 2022
Closed
@IrakliJani
Copy link
Contributor

@ZeRego I'm fine with the choice. Library code uses react internals and nothing else so that's good. hopefully that will get merged.
I'm also fine with MobX but not Redux.

random thought:

  • would it be possible to break down Large providers into multiple smaller providers?
  • to me VisualizationProvider looks like a large monolith that feeds everything.
  • same goes to the AppProvider. e.g. showToastSuccess does not make sense to be part of AppContext. It should belong to its own Provider

@ZeRego ZeRego self-assigned this Aug 31, 2022
@owlas owlas temporarily deployed to chore/stop-explorer-provider-updates-to-rerender-entire-page - lightdash PR #3108 August 31, 2022 13:40 — with Render Destroyed
@ZeRego ZeRego force-pushed the chore/stop-explorer-provider-updates-to-rerender-entire-page branch from 801bbe6 to 555a2e2 Compare August 31, 2022 13:45
@ZeRego ZeRego added 🖥 frontend This issue requires changes to the frontend tech-debt Cruft, refactoring, and hinderances to developer productivity labels Aug 31, 2022
@ZeRego ZeRego changed the title chore: improve explore page performance chore: refactor ExplorerProvider to use context selector Aug 31, 2022
@ZeRego ZeRego marked this pull request as ready for review August 31, 2022 14:05
@ZeRego ZeRego requested a review from a team August 31, 2022 14:06
@ZeRego ZeRego force-pushed the chore/stop-explorer-provider-updates-to-rerender-entire-page branch from 555a2e2 to 6bece78 Compare August 31, 2022 14:56
@owlas owlas temporarily deployed to chore/stop-explorer-provider-updates-to-rerender-entire-page - lightdash PR #3108 August 31, 2022 14:56 — with Render Destroyed
@ZeRego ZeRego merged commit 8dee6b3 into main Aug 31, 2022
@ZeRego ZeRego deleted the chore/stop-explorer-provider-updates-to-rerender-entire-page branch August 31, 2022 15:46
@github-actions
Copy link
github-actions bot commented Sep 1, 2022

🎉 This PR is included in version 0.239.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@ZeRego ZeRego

Labels
🖥 frontend This issue requires changes to the frontend released tech-debt Cruft, refactoring, and hinderances to developer productivity
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@ZeRego @rephus @IrakliJani @owlas
0