question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ref-callback life-cycle order issue

See original GitHub issue

I’m trying to auto-focus and auto-select an <input type="text"> via the ref property, and was surprised to find that ref gets invoked prior to value getting populated on the same element.

Working example in React:

https://codesandbox.io/s/38k089rxkm

Same example in Preact:

https://codesandbox.io/s/v6406xj99l

Under Preact, calling el.select() has no effect, because the element has no value yet.

Now, I could just defer with setTimeout() or whatever, but this appears to be a potentially substantial inconsistency from React, so I thought I should report it.

Possibly related to #477 and #814.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:21 (11 by maintainers)

github_iconTop GitHub Comments

2reactions
marvinhagemeistercommented, Sep 7, 2018

@mindplay-dk Oh no that was done by accident. I just merged the new ref implementation in our private repo for the next major release and because I mentioned this issue it got closed here… Wasn’t aware that GitHub allowed closing issues from other repos.

2reactions
developitcommented, Aug 22, 2018

@mindplay-dk all good points. I think we should be able to switch back to invoking refs as part of the element lifecycle rather than during property diffing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Avoiding useEffect with callback refs - TkDodo's blog
ref is a reserved property on build-in primitives, where React will store the DOM node after it was rendered. It will be set...
Read more >
React Callback Refs — a Complex Case | by E.Y. - Medium
If the Child shares the same life-span with the Parent, it is find. But it's very often in React when the Child is...
Read more >
componentDidMount called BEFORE ref callback
Same with React 16. The documentation clearly states ref callbacks are invoked before componentDidMount or componentDidUpdate lifecycle hooks.
Read more >
Refs and the DOM - React
React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts. Refs...
Read more >
The post-Hooks guide to React call order - LogRocket Blog
The callback is executed twice, and the worst thing about it is that the ref is null during the first execution! This is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found