React Refs

If we want to grab specific JSX elements in React we could still use all the normal methods that VanillaJS give us, like the document.getElementById or the document.querySelector method. But this is not the best or the most efficient way to do it, because these methods start searching for the specified elements across the whole DOM, that means from the beginning

tag of it.

React provides a way to reference elements only inside the class they were defined. And that is through the refs object, like seen above. In our example any time the value of the input field changes, we execute the function above. What this function does, is that takes the current value of the input any given moment and pastes it to the paragraph. The grab of the paragraph is done by ref as shown.

Every JSX element can have a ref attribute like a special identifier. This has to be a string. Then inside every function that exists or have been created inside the class, you can grab any JSX element you want by referencing to it.

How? By simply using the refs object that every react component provides. Because every component has a unique refs object, you can have different JSX elements with the same name as ref, as long as they are in different components.

But not more than one JSX elements with the same ref inside the same component!

This method is optimized as it limits the range of search only inside the component and to the elements that the render function of the component returns.