Skip to content

Add support for react hook enabled flag#4071

Open
doanhtu07 wants to merge 1 commit intoelectric-sql:mainfrom
doanhtu07:feat/react-hook-pause
Open

Add support for react hook enabled flag#4071
doanhtu07 wants to merge 1 commit intoelectric-sql:mainfrom
doanhtu07:feat/react-hook-pause

Conversation

@doanhtu07
Copy link
Copy Markdown

Background

Hi all, I was playing around with ElectricSQL and noticed that it couldn't stop polling even when a React component already unmounted.

Then, I saw your text on the main doc here: https://electric-sql.com/docs/integrations/react#how-to-abort-a-shape-subscription-%E2%80%94-abortcontroller

I also found this issue: #2212

How this solution works

packages/typescript-client/src/shape.ts

  • Introduce a way to not auto-start the stream whenever we create a new shape
  • So client will have more control over the lifecycle of the stream

packages/typescript-client/src/client.ts

  • Introduce pause and resume actions
  • Client can use these actions to actively pause or resume the stream

packages/react-hooks/src/react-hooks.tsx

  • Use a map to count references to a stream
  • If the count drops to 0, pause the stream
  • If the count reaches 1, resume the stream

Notes

Let me know what you think

Note that I've not worked on the second half of issue 2212

  • "auto-pause long polling from useShape after the user has been inactive for so long and reactivate it when the user is active again"

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant