Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Lit/React – Wraps ref in a stable callback #4335

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
augustjk merged 4 commits into from
Oct 27, 2023
Merged

Lit/React – Wraps ref in a stable callback #4335

augustjk merged 4 commits into from
Oct 27, 2023

Conversation

@stefanpearson
Copy link

@stefanpearson stefanpearson commented Oct 27, 2023 •
edited
Loading

I noticed in the case of providing a stable ref callback to a wrapped React component, it was invoking it on every render. This is because the internal ref is set to an unstable function, with a new reference on every render. This was particularly problematic when using a callback to do some kind of setup/cleanup loop based on connecting/disconnecting to the DOM.

To my knowledge, both React and Lit's ref callback functionality is to ensure this only happens on connect/disconnect, or if the reference changes.

E.g.

const MyComponent = () => {
  // Stable ref callback
  const onNode = useCallback((node: HTMLElement | null) => {
    console.log(node);
    if (node) {
      // Element is mounted, do some setup
    } else {
      // Element is unmounted, do some cleanup
    }
  }, []);
  
  return (
    <LitReactComponent ref={onNode} />
  );
}

// onNode invoked twice every render:
// call 1: null
// call 2: node

This PR ensures the intercepted ref callback within createComponent is stable between renders.

@changeset-bot
Copy link

changeset-bot bot commented Oct 27, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: 9269fa7

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

This PR includes changesets to release 5 packages
Name Type
@lit/react Patch
@lit-labs/react Patch
@lit-internal/test-elements-react Patch
@lit-examples/nextjs Patch
@lit-examples/preact Patch

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

@google-cla
Copy link

google-cla bot commented Oct 27, 2023

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2023 •
edited
Loading

📊 Tachometer Benchmark Results

Summary

A summary of the benchmark results will show here once they finish.

Results

The full results of your benchmarks will show here once they finish.

tachometer-reporter-action v2 for Benchmarks

augustjk
augustjk approved these changes Oct 27, 2023
View reviewed changes
Copy link
Member

@augustjk augustjk left a comment

Choose a reason for hiding this comment

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

Awesome! Thank you for the catch and fix! I'm suggesting a change for the changelog entry to be a bit more wordy.

augustjk
augustjk approved these changes Oct 27, 2023
View reviewed changes
Copy link
Member

@augustjk augustjk left a comment

Choose a reason for hiding this comment

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

Thank you! Love the additional details for the changelog.

@stefanpearson
Copy link
Author

stefanpearson commented Oct 27, 2023

It seems the benchmark check is failing, what did I break? 🙃

@augustjk
Copy link
Member

augustjk commented Oct 27, 2023

that's a false negative in our workflow that needs addressing. you're all good!

@augustjk augustjk merged commit 7fc72f7 into lit:main Oct 27, 2023
@lit-robot lit-robot mentioned this pull request Oct 27, 2023
Merged
@stefanpearson stefanpearson deleted the lit-react-stable-ref-callback branch January 10, 2024 10:33
@CxsLucyfer CxsLucyfer mentioned this pull request Jan 29, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@augustjk augustjk augustjk approved these changes

@kevinpschaaf kevinpschaaf Awaiting requested review from kevinpschaaf kevinpschaaf is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@stefanpearson @augustjk