ref-callback life-cycle order issue
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 5 years ago
- Comments:21 (11 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.@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.