what is innerRef in Reactjs?
innerRef
is not a standard React property. It is a property of the React Popper module and is documented here.
It is a
Function that can be used to obtain popper reference
Clarification:
innerRef
is just another attribute on the custom component (Arrow, for example) in react-popper.
This pattern is becoming a little common in cases where we want to access the dom element created by a child component. It could as well be named childRef
or any other meaningful name (caution: ref
or childRef
won't work if the library you are using refers to this with a particular name such as innerRef
).
Why innerRef?
What it does is, it points to a function in the parent component. The function takes a domNode/React instance as argument and stores it as parent component's instance property so that the parent can use the stored dom to access properties (width, offsetHeight, scrollTop, children, event listeners on the dom etc) of child node.
Your case:
Looking at the Arrow
component, we can see that the innerRef
is actually the setArrowNode
function of Popper
class which takes the arrow node as argument and sets it as an instance attribute on Popper. And the Arrow
component seems to be kind of styled component which refers to ref
prop of React as innerRef
(new version of styled-components uses ref
attribute). Which means, the react-popper will not work as expected if you pass the arrowProps.ref
to anything else other than innerRef
prop of Arrow
.
innerRef
is just a custom property that the authors chose to use. It has no special meaning within React. Looking at the source, it seems like they wanted a way to distinguish from the React ref
prop, not sure why.