0

In ReactJs documentation, it is said

Refs are created using React.createRef() and attached to React elements via the ref attribute

Logging the ref gives an object which has a current property set to null. Just out of curiosity, I created a normal object with current property and tried to use it as a ref. Following is the test case and it somehow works:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);    
    this.myRef = {}; //Works!!!
    //console.log(React.createRef());
    //bind
    this.RefFocus = this.Myfocus.bind(this);
  }
  componentDidMount() {
    console.log(this.myRef.current);
  }
  Myfocus() {
    this.myRef.current.focus();
  }


  render() {
    return (
      <div>        
        <input
          type="text"
          ref={this.myRef} />
        <input
          type = "button"
          value = "Focus the text input"
          onClick = {this.RefFocus}
        />        
      </div>
    );
  }
}

//const app = ReactDOM.createRoot(document.getElementById("app"));
ReactDOM.render(<CustomTextInput />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

So the question is, why do we need the createRef api at all? Is there something special that React does with createRef, e.g. better performance, memory optimization etc or are there cases like ref forwarding where a custom {current: null} wouldn't work?

Please explain in easy language, I am new to React and JavaScript.

user31782
  • 7,087
  • 14
  • 68
  • 143
  • 2
    It *is* just an object. If you look at the source code [here](https://github.com/facebook/react/blob/main/packages/react/src/ReactCreateRef.js), it's just returning a plain object with a current property. It's just a wrapper. – nullptr Jun 19 '23 at 13:42
  • 1
    Using an API method has the added benefit if the internals of React change its less likely to break existing code. So although you can, I would recommend you don't . – Keith Jun 19 '23 at 13:53
  • @nullptr Can you please link to the source code of `useRef` as well. I did get upto https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js#L115 but this seems to be getting the actual implementation from somewhere else. – user31782 Jun 19 '23 at 18:32

1 Answers1

0

CreateRef is just a wrapper to simplify writing and reading code

The createRef implementation looks like this (source code react):

export function createRef() {
  const refObject = {
    current: null,
  };
  return refObject;
}
Vasyl Rohozha
  • 324
  • 1
  • 6
  • Could you explain the usage of `Object.seal` in the if condition `if (__DEV__) { Object.seal(refObject); }` from the source code. – user31782 Jun 19 '23 at 17:43
  • @user31782 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal might be of help – evolutionxbox Jun 20 '23 at 13:02
  • @evolutionxbox Thanks for the link. Why do we use `seal` in only `if(__DEV__)`, don't we want the seal in production build as well? – user31782 Jun 20 '23 at 19:03
  • I accepted the answer to save it from being deleted for the time being.. – user31782 Jun 20 '23 at 19:04
  • 2
    @user31782. Because current wants to be immutable, so doing seal will help catch invalid changing of current. Not needed at production because you will have found any error during DEV and saves a few CPU cycles not doing something that's now not required. IOW `Object.seal` has no runtime logic, it's to help with development, in the same way map files are only used during dev. – Keith Jun 22 '23 at 07:00