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

@reach/rect: Resubscribe when nodeRef changes #172

Open
wants to merge 2 commits into
base: master
from

Conversation

Projects
None yet
1 participant
@einarlove
Copy link

commented May 14, 2019

Before this change, if you passed a new ref or changed the ref.current passed to useRect then you would never get rects from the new node. This update fixes this by resubscribing the listener if the node changes.

This is only a fix for the useRect hook, not the 2018-render-props thingy. It's incredible how easy reasoning with updates are with hooks vs render-props.

I'll take a look into fixing the <Rect> as well if you approve of this change.

Resubscribe node observer when nodeRef changes
Before this change, if you passed a new ref or changed the `ref.current` passed to `useRect` then you would never get rects from the new node. This update fixes this by resubscribing the listener if the node changes.

This is only a fix for the useRect hook, not the 2018-render-props thingy. It's incredible how easy reasoning with updates are with hooks vs render-props.

I'll take a look into fixing the `<Rect>` as well if you approve of this change.
@einarlove

This comment has been minimized.

Copy link
Author

commented May 14, 2019

After checking the docs, my conclusion is that this update can't be applied to <Rect> since it can't know when/if the ref changes. The only onUpdate is triggered by observe change. So for this update to work for <Rect>, some refactoring has to be done.

@einarlove

This comment has been minimized.

Copy link
Author

commented May 16, 2019

I added a commit which checks for nodeRef.current before subscribing so that if you pass a ref which does not yet have a node reference it silently waits.

const [anchor, setAnchor] = useState()
const anchorRect = useRect({ current: anchor })

return (
  <div>
    {JSON.stringify(anchorRect)}
    {items.map(item =>
      <Item onClick={event => setAnchor(event.target)} />
    )}
  </div>
)

@einarlove einarlove changed the title Resubscribe node observer when nodeRef changes @reach/rect: Resubscribe node observer when nodeRef changes May 16, 2019

@einarlove einarlove changed the title @reach/rect: Resubscribe node observer when nodeRef changes @reach/rect: Resubscribe when nodeRef changes May 16, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.