Skip to content
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.

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

Proposal: use signal effect #91

Merged
merged 10 commits into from
Sep 17, 2022
Merged

Proposal: use signal effect #91

merged 10 commits into from
Sep 17, 2022

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Sep 7, 2022

Currently running effects is a bit of a pitfall imho, or we run them globally outside of the function-scope, or we have to wrap them with a useMemo/useEffect/... This lead me on the path of creating a small utility function that abstracts this. When people want to use a global signal/effect they can import from the core package, however when they want a component-specific signal they leverage useSignal. It's here where I saw a discrepancy, we have a utility to help provide a signal but no utility for the effect.

Here comes the introduction of useSignalEffect it basically wraps an effect with useEffect and holds a stable ref to the callback being passed to the useSignalEffect so we don't have to bother adding dependencies to the array of the used useEffect. Currently the only short-coming I may be foreseeing is the lack of an onInvalidate function, i.e. what happens if an effect updates that is for example still fetching, we could be introducing a race-condition there.

Usage:

const Results = () => {
  const page = useSignal(1);
  
  useSignalEffect(() => {
    fetch('x?page=' + page.value).then(updateResults)
  })
  
  return results
}

@changeset-bot
Copy link

changeset-bot bot commented Sep 7, 2022

🦋 Changeset detected

Latest commit: 183000d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@preact/signals Minor
@preact/signals-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Sep 7, 2022

Deploy Preview for preact-signals-demo ready!

Name Link
🔨 Latest commit 183000d
🔍 Latest deploy log https://app.netlify.com/sites/preact-signals-demo/deploys/632582cd890e120008834778
😎 Deploy Preview https://deploy-preview-91--preact-signals-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2022

Size Change: +431 B (+1%)

Total Size: 67.9 kB

Filename Size Change
docs/dist/assets/index.********.js 1.08 kB +236 B (+28%) 🚨
docs/dist/assets/signals.module.********.js 1.96 kB -5 B (0%)
docs/dist/basic-********.js 244 B +1 B (0%)
docs/dist/demos-********.js 3.35 kB -3 B (0%)
docs/dist/nesting-********.js 1.13 kB -1 B (0%)
packages/preact/dist/signals.js 1.18 kB +54 B (+5%) 🔍
packages/preact/dist/signals.mjs 1.17 kB +53 B (+5%) 🔍
packages/react/dist/signals.js 877 B +43 B (+5%) 🔍
packages/react/dist/signals.mjs 850 B +53 B (+7%) 🔍
ℹ️ View Unchanged
Filename Size
docs/dist/assets/client.********.js 45.8 kB
docs/dist/assets/jsxRuntime.module.********.js 282 B
docs/dist/assets/preact.module.********.js 4 kB
docs/dist/assets/signals-core.module.********.js 1.59 kB
docs/dist/assets/style.********.js 21 B
docs/dist/assets/style.********.css 1.21 kB
docs/dist/react-********.js 236 B
packages/core/dist/signals-core.js 1.65 kB
packages/core/dist/signals-core.mjs 1.32 kB

compressed-size-action

packages/preact/src/index.ts Show resolved Hide resolved
packages/preact/src/index.ts Outdated Show resolved Hide resolved
@@ -283,6 +283,15 @@ export function useComputed<T>(compute: () => T) {
return useMemo(() => computed<T>(() => $compute.current()), []);
}

export function useSignalEffect(cb: () => void) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add this hook to the react adapter too 👍

JoviDeCroock and others added 3 commits September 16, 2022 19:38
Co-authored-by: Jason Miller <developit@users.noreply.github.com>
@JoviDeCroock JoviDeCroock merged commit fb74bb9 into main Sep 17, 2022
@JoviDeCroock JoviDeCroock deleted the use-signal-effect branch September 17, 2022 08:20
@github-actions github-actions bot mentioned this pull request Sep 17, 2022
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.

4 participants