- Published on
Manipulating the DOM with React Ref
When you found something like
document.querySelector('.something') in your React codebase, it's probably a code smell.
To manipulate the DOM you should consider using "ref" - React Docs - ref
After rendering the DOM element, it will enable the DOM node and its methods to be called.
To ensure the "inputRef.current" will be available at the moment of the trigger "focus()", you can do an "early return" to bail out the effect early, like the following snippet: