React refs: Everything you need to know for boosting eCommerce project

The React API is fairly simple, even though it has been growing bigger. With recent features such as Context and Hooks, the whole ecosystem has become more complete. However, some concepts are usually a source of struggle for beginners and even experienced developers. One of them, that is to say, is the React Refs API. This is an attribute that makes it possible to store a reference to particular DOM nodes or also React elements.

React Refs - a definitive guide
React Native refs – a definitive guide

Refs are certainly a big pivot away from how we usually build applications. Still, the React team did something smart that all library authors should do: they provided escape hatches and kept the library open for situations beyond the ones they were specifically designed for, as well as situations the model may not work for. So now, we – ArrowHiTech would like to introduce to you guys everything you may need to know about React Native refs.

But first, let’s go through some definitions.

What is React Native refs?

Refs, to clarify, are the shorthand used for references in React. It is likewise to the keys to React. Moreover, this is an attribute that makes it possible to store a reference to particular DOM nodes or React elements. Also, it provides a way to access React DOM nodes or React elements and how to interact with them. It is used when we want to change the value of a child component, without making the use of props.

React Refs definition
React Native refs definition

When to use React Native refs

React Native refs can be used in the following cases:

  • When we need DOM measurements such as managing focus, text selection, or media playback.
  • It is certainly used in triggering imperative animations.
  • When integrating with third-party DOM libraries.
  • It can also use as in callbacks.

When to not use React Native refs

  • Its use, likewise, should be avoided for anything that can be done declaratively. For example, instead of using open() and close() methods on a Dialog component, you need to pass an isOpen prop to it.
  • You should also have to avoid the overuse of the React Native refs.

>>> Related News

React Props vs State: what are they and main differences you should know

React Context API: Introduction and practical guide

The usage of React Native refs

To get the reference to the DOM node you certainly need to do two things:

 import React, { Component } from 'react';
class Foobar extends Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();    // initialize "this.myInput"
  }
  render() {
    return (
      <input ref={this.myInput}/>        {/* pass "this.myInput" as prop */}
    );
  }
}

All in all, standard HTML elements in React have a reserved prop called ref (much like style which is a reserved prop). So, simply pass the ref you initialized in the constructor to the ref prop… and voila! Also, you can start interacting with the DOM node by using this.myInput.current. this.myInput.current holds the reference to the DOM node as a result.

Example: Focusing an <input>

To clarify, let’s make a small adjustment. This is to demonstrate how we could start interacting with the DOM node:

 import React, { Component } from 'react';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();
  }
  render() {
    return (
      <div>
        <input ref={this.myInput}/>
        <button onClick={() => {
          this.myInput.current.focus();
        }}>
          focus!
        </button>
      </div>
    );
  }
}

Calling the focus() method isn’t a React.js thing… it’s certainly a normal JavaScript thing. For example, this is how it’s done to React Native refs with vanilla JavaScript:

document.getElementById('myInput').focus();

Controlling an HTML media element

You can also use React.createRef() and the standard JavaScript <video> API to control playback.

 import React, { Component } from 'react';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.myVideo = React.createRef();
  }
  render() {
    return (
      <div>
        <video ref={this.myVideo} width="320" height="176" controls>
          <source src="https://blender.com/big-buck-bunny.mp4" type="video/mp4" />
        </video>
        <div>
          <button onClick={() => {
            this.myVideo.current.play();
          }}>
            Play
          </button>
          <button onClick={() => {
            this.myVideo.current.pause();
          }}>
            Pause
          </button>
        </div>
      </div>
    );
  }
}

React Native refs with React Hooks by using useRef

Refs in React Hooks aren’t much different than class components. It’s certainly achieved using the useRef hook. Above all, just remember to omit this and you are golden.

 import React, { useRef } from "react";
function App() {
  const myInput = useRef(null);
  return (
    <div>
      <input ref={myInput}/>
      <button onClick={() => {
        myInput.current.focus();
      }}>
        focus!
      </button>
    </div>
  );
}

Final words

That should consequently conclude everything you may need to know about React Native refs in the most basic method of approaching. We started with a recap on the basic concepts of React and its usage, why we generally shouldn’t break the framework’s model, and why we may sometimes need to. Remember to use refs only when there is an implicit function call React can’t handle through its methods. Also, make sure it doesn’t alter the internal state of the components.

One more important thing you should remember that ArrowHiTech also provide Ecommerce Development Services. Our services definitely help you in your Ecommerce Business. Thus, let take a look at them to make sure that you will not miss any awesome services.

Tags

Share