DEV Community: oussel

A Guide for Refs in React

oussel — Thu, 18 Feb 2021 23:46:21 +0000

Hello!

In this article, we're going to talk about refs in React. This is a relatively well-known and widely used concept of React that makes life a lot easier in some cases. but at the same time, we should try to avoid using them if possible. Because it can enter into conflict with React’s diff and update approaches.

What we will see in this article :

What are refs?
What are the different approaches to creating Refs?
Is there any advantage of using one approach over the other?
How can I use Refs and To What can I refer?
How to pass a single or multiple ref/refs to a child component?

What are refs? :

As the documentation mentioned :

“ Refs provide a way to access DOM nodes or React elements created in the render method ”

For Example, you can focus an input node based on a button click :

style.css

input:focus {
  background-color: Aqua;
}

MyComponent.js


import React from 'react';
import '.style.css'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef= React.createRef();
  }

  setFocus = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.setFocus}>Click to set focus !</button>
      </div>
    );
  }
}

export default MyComponent;

What happened exactly?

In fact when you include < MyComponent /> JSX syntax inside your react app, and at the time of rendering, React will first create an instance of the Class MyComponent and will call the constructor to construct the object instance after that he will call render method, this method tell React that you want to associate the ref with the inputRef that we created in the constructor. The input Node will then say to MyComponent instance "ok, I will assign to your attribute inputRef my address in memory, so you can have access to me later". And then when we click the button, our instance < MyComponent /> already knows the place of the input DOM node in memory then it can have access to all methods and attributes of this input DOM node ...

Using Refs is a different way to the typical React dataflow; normally in React DataFlow parent components interact with their children using props and React docs always inform you to stay as much as possible relying on this workflow but in few cases where you need to imperatively modify a child outside of the typical dataflow and have direct access to this child component to take for example its position, then you can use Refs ...

What are the different approaches to creating Refs ? :

In old versions of React, you can refer to a component with strings refs but now it's considered as legacy and they recommend using either the callback Ref or the object Ref.

Ref object: that you can create with createRef API (from React 16.3) or useRef Hook (from React 16.8) :

A ref object is a plain JS object that contains a current property: { current: < some value > }. this property is used to store a reference to the DOM node.

In the example above, if we console log this.inputRef :

You will see that our ref.current contains The input node Element, with that you can access all its methods like focus(), blur(), click() …

You can create a Ref Object with CreateRef API inside ClassComponent or UseRef Hook inside functional components.

But is there any difference between the two (CreateRef API vs UseRef Hook)?

Ofc you can't use Hooks in general inside a class component, React will not let you do that. But if you try to use CreateRef API inside your functional component a new object Ref will be created in every rerender and you will lose your old object ref.

In fact React.createRef(initValue) and useRef(initValue) both returns an object ref { current: initValue } Besides that useRef also memoizes this ref to be persistent across multiple renders in a functional component. because In React you cannot create an instance from a functional component. and if we do not have an instance, we, therefore, do not have a direct way to persist this reference across multiple renders. that's Why in general some hooks come up to help us and make our functional components stateful and more powerful throughout their lifecycle.

And That’s why It is sufficient to use React.createRef in class components, as the ref object is assigned to an instance variable in the constructor, hence accessible throughout the component and its lifecyle.

Callback ref:

Another way to set refs in React is to use callback refs. Callback refs is just a function that, when called, receives the React component instance or HTML DOM node as its argument, which can be stored and accessed elsewhere.

if we use callback ref in the first example, this is how it will look like :

MyComponent.js

//...
class MyComponent extends React.Component {
  callbackFunction = (node) => {
    this.inputRef = node; // this callback will attach node to inputRef
  };
  setFocus = () => {
    this.inputRef.focus(); // we access node directly , no need to current property unlike Object ref
  };

  render() {
    return (
      <div>
        <input ref={this.callbackFunction} />
        <button onClick={this.setFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

When does the callback get called?

React docs are very clear on this:

“ React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts. Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.”

Is there any advantage of using one over the other (Object Ref vs Callback Ref)?

the Docs say :

“Callback refs give you more fine-grain control”

This means that with Callback refs you gain more flexibility, you can look at this interesting example that can help you for example to set multiple refs in an array :

class A extends React.Component {
    constructor(props) {
        super(props);
        this.inputs = [];
    }

    render() {
        return [0, 1, 2, 3].map((key, index) => (
            <Input 
                key={key} 
                ref={input => this.inputs[index] = input}
            />)
        );
    }
}

Another advantage of Callback Ref also mentioned in useRef docs :

“If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.”

Meaning; if you want to attach a ref to a component that will mount later or depending on a conditional (using conditional rendering) then you can use the callback ref. because it can attach a ref to your DOM node dynamically.

The best example for this is from the docs itself:

link here in this part https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

How can I use Refs and to What can I refer?

You can refer a ref to the ref attribute of two elements: a DOM node (like div, input …), or React Class Component but you may not use the ref attribute on functional components because they don’t have instances. This means :

- on DOM node you can refer for example to a div or input (first example) like this :

<div ref={myRef} />

And you can use this reference to focus for example input text or get the position of a div.

- on React Class component you can do it like this :

import React from "react";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myComponentRef = React.createRef();
  }

  setFocusOnMyChild = () => {
    this.myComponentRef.current.setFocus(); // As you can see we are invoking SetFocus
    //that is inside MyComponent from outSide .
  };
  render() {
    // myComponentRef refer to MyComponent React Class instance
    return (
      <div>
        <MyComponent ref={this.myComponentRef} />
        <button onClick={this.setFocusOnMyChild}>
          Im a button from parent (App.js)
        </button>
      </div>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  setFocus = () => {
    this.inputRef.current.focus();
  };
  render() {
    return (
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.setFocus}>
          Click to set focus ! (Im inside MyComponent)
        </button>
      </div>
    );
  }
}

export default App;

result:

By referring to a class component you can have access to methods inside the instance of this Class when React Creates it and invoke them from outside. you can console.log(classRef) and see all information that you can take from there.

- But you can't do the same with React Functional component: your ref object will be null, Why? :

Because functional components as we mentioned before, don’t have an instance in React, An instance is what you refer to as this in the component class you write. It is useful for storing local state and reacting to the lifecycle events.

If you want to pass ref to your functional component, you can do it with the help of the hook useImperativeHandle combined with RefForward

this can help you to refer to a functional component and you can for example invoke some functions that are inside your functional component from outside. these functions are exposed with the help of the useImperativeHandle hook, the same way you do it before with the Class component,

in fact, the useImperativeHandle hook will customize the instance that is exposed to the parent component when using ref. and the forwardRef will help us to transfer the ref between parent and child.

Thankfully React documentation is very rich with examples, you can check it here :

Forwarding refs: https://reactjs.org/docs/forwarding-refs.html
Useimperativehandle hook: https://en.reactjs.org/docs/hooks-reference.html#useimperativehandle

PS: We are discussing here referring to a functional component not using Refs inside functional component because. You can create and use refs inside a functional component as long as you refer to a DOM element or a class component.

How to pass a single or multiple ref/refs to a child component?

- Passing a single ref :

It's simple you can do it with RefForward. As we mentioned before RefForward is a technique that helps us to pass automatically refs (in other words, “forward” it) to a child component either for Class component or functional component.

React.forwardRef takes a function with props and ref arguments. This function returns a JSX Element.

React.forwardRef((props, ref) => {
    ...
})

We create for example a CustomTextInput with the Help of React.forwardRef like this :

const CostumTextInput = React.forwardRef((props, ref) => (
  <input type="text" placeholder={props.placeholder} ref={ref} />
));

You can now get a ref directly to the DOM node input and also pass as props your placeholder :

const ref = React.createRef();
<CostumTextInput ref={ref} placeholder="Hello" /> ;

If you don’t want to use React.forwardRef, you can pass ref as a prop with a different name (!= ref) to Child Component, and there is no problem with that. Even React docs mention the custom ref prop as a more flexible approach to React.forwardRef :

“If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use this alternative approach and explicitly pass a ref as a differently named prop.”

But you should pay attention if you pass an inline callback ref function down as prop because callback can trigger a re-render unless you have used a way of memoization with help of useCallback for example.

The only advantages of forwardRef API :

consistent api for refs and uniform access API for DOM nodes, functional and class components
ref attribute does not bloat your props, because when you use forwardRef , it gives you a second argument ref, it didn’t add ref to your props

- Passing mupltiple refs :

You can do it with useImperativeHandle hook and RefForward API, like this :

import "./styles.css";
import React,{ useRef ,useImperativeHandle} from "react";

export default function App() {
  const inputsRef = useRef(null);

  //inputsRef will Containt inside current property
  //an costum instance that contains all methods exposed with useImperativeHandle ,thanks to  forwardRef and useImperativeHandle

  return (
    <div className="App">
      <Inputs ref={inputsRef} />
      <button onClick={() => inputsRef.current.focusMyInput1()}>Focus Input1</button>
      <button onClick={() => inputsRef.current.focusMyInput2()}>Focus Input2</button>
      <button onClick={() => inputsRef.current.focusMyInput3()}>Focus Input3</button>
    </div>
  );
}

const Inputs = React.forwardRef((props,ref)=>{

  //let's create a ref for each input
  const refInput1 = useRef();
  const refInput2 = useRef();
  const refInput3 = useRef();

  //Let's Expose a costum instance to the Parent Component 
  //this instance will contain all methods to invoke focus on inputs

  //a parent component that renders <Inputs ref={inputsRef} /> 
  //would be able to call all methods (focusMyInput1,focusMyInput2,focusMyInput3).

  useImperativeHandle(ref, () => ({
    focusMyInput1: () => {
      refInput1.current.focus();
    } ,
    focusMyInput2: () => {
      refInput2.current.focus();
    } ,
    focusMyInput3: () => {
      refInput3.current.focus();
    } 
  }));


  return (
    <div className="Inputs">
      <input ref={refInput1} />
      <input ref={refInput2} />
      <input ref={refInput3} />
    </div>
  );
})

Another way to pass multiple refs to child component: You can construct an object of Refs, and passe it as props with a prop that has a different name to "ref" to a Child Component, Like this :


import "./styles.css";
import { useRef } from "react";

export default function App() {
  const refInput1 = useRef(null);
  const refInput2 = useRef(null);
  const refInput3 = useRef(null);
  //We are passing here multiple Refs with the help of Props AllRefs
  //AllRefs is just a simple prop that receive an object of refs that after will be associated to an input node dom
  return (
    <div className="App">
      <Inputs allRefs={{ refInput1, refInput2, refInput3 }} />
      <button onClick={() => refInput1.current.focus()}>Focus Input1</button>
      <button onClick={() => refInput2.current.focus()}>Focus Input2</button>
      <button onClick={() => refInput3.current.focus()}>Focus Input3</button>
    </div>
  );
}

function Inputs(props) {
  return (
    <div className="Inputs">
      <input ref={props.allRefs.refInput1} />
      <input ref={props.allRefs.refInput2} />
      <input ref={props.allRefs.refInput3} />
    </div>
  );
}

Result in Both methods :

That's all. And Remember Don’t Overuse Refs, Hope you learned something new.

How to use Conditional Rendering with Animation in React

oussel — Fri, 12 Feb 2021 22:39:24 +0000

In this article we will code together an example of conditional rendering in React with a FadeIn/FadeOut effect.
Ofc you can use libraries like ReactCSSTransitionGroup to achieve that but if you just need to code a simple animation with conditional Rendering without using any 3rd Party Library then you are in the right place 😊

What is the problem :

To understand what I’m trying to explain here , we should first take a look on the importance of conditional rendering in react / and what are different approaches to animate (FadeIn/Fadeout) mount/Unmout your elements in your page.

Without Conditional Rendering :

With just HTML/CSS and the some help of JS (No conditional Rendering) we can achieve that by modifying opacity gradually with keyframes and animation CSS property or just transition CSS property:




import { useState } from "react";
import "./styles.css";

const mountedStyle = { animation: "inAnimation 250ms ease-in" };
const unmountedStyle = {
  animation: "outAnimation 270ms ease-out",
  animationFillMode: "forwards"
};

export default function App() {
  const [showDiv, setShowDiv] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setShowDiv(!showDiv)}>Show/Hide</button>
      <div
        className="transitionDiv"
        style={showDiv ? mountedStyle : unmountedStyle}
      ></div>
    </div>
  );
}

Style.css




.transitionDiv {
  background: red;
  height: 100px;
  width: 200px;
  margin: 0 auto;
}

@keyframes inAnimation {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes outAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

Demo :

link

As you can see based on ShowDiv value we can set Mount/UnMount Style and start a transition to affect
property opacity that can has a numerical value setting between (0-1), so keyframes can be calculated across the duration provided in transition.

PS : You can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).

So in our case visibility property that has a binary setting (visible/hidden) behaves differently ; so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated

What React gives us different in conditional rendering?

In the approach above, we are using transition on visibility property this property tells the browser whether to show an element or not BUT the browser still treats it as an element that takes his own space and affect the flow of other elements in page.

And even if we found a trick like to set property height: 0 or display: none when transition ends, this will ofc hide and display:none will even remove it from the document layout BUT the element will remain in the DOM Object.

In React, conditional rendering works similar to JavaScript conditions. And based on if/else statement React will deals with DOM Object efficiently and he will decide to Hide or show elements. therefore, with conditional rendering in react, your DOM object will not contain unnecessary and unwanted elements, this will improve the smooth running of your code and debugging as well as design.

BUTTTTTT … How can you benefit from the efficiency of Conditional Rendering in React and in the same time apply transition or animation on something that doesn’t exist in your DOM Object when React decide to hide your element :) ? Now you can see all the problem in front of you.

If you try to add a simple conditional rendering in our exemple above :



//...

export default function App() {
  const [showDiv, setShowDiv] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setShowDiv(!showDiv)}>Show/Hide</button>
//Conditional Rendering
 { showDiv &&
      <div
        className="transitionDiv"
        style={showDiv ? mountedStyle : unmountedStyle}
      ></div>
}
    </div>
  );
}

You will notice that our Div lose animation when you try to hide it , that's because With conditional Rendering ,React will remove your div from the DOM Object before transition starts .

To solve this problem, we can use the following two methods :

- Using OnAnimationEnd Event :

React offers some built-in events handlers for catching some events and handle them in the capture phase. React components can use native events like preventDefault() and stopPropagation() ...

In our case we are interested to catch animation transition when we want to Unmount our component and to have more control during this phase . this can be done with :

onAnimationEnd — This event triggers the moment the animation ended.

Let's code it :



//...

export default function App() {
  const [isMounted, setIsMounted] = useState(false);
  const [showDiv, setShowDiv] = useState(false);
  return (
    <div className="App">
      <button onClick={() => {
        setIsMounted(!isMounted)
        if (!showDiv) setShowDiv(true); //We should Render our Div
      }
      }>Show/Hide</button>

      { //Conditional Rendering
        showDiv && <div
        className="transitionDiv"
        style={isMounted ? mountedStyle : unmountedStyle}
        onAnimationEnd={() => { if (!isMounted) setShowDiv(false) }}
      ></div>}
    </div>
  );
}

As you can see , Show Div that control the rendering will wait until Anitmation Ends then it will switch to false . Thanks to onAnimationEnd Event trigger.
We introduce also a new variable isMounted that will indicate if our user click button (Show/Hide) .

Demo :

link

- Coding a simple Custom hook :

to solve this we can code a simple function that will delay the unmount stage and let transition to finish before React remove our element from DOM Object.

this function will give to our variable showDiv a delay time before switching its value to false .




import React, { useEffect, useState } from "react";

function useDelayUnmount(isMounted, delayTime) {
  const [showDiv, setShowDiv] = useState(false);
  useEffect(() => {
    let timeoutId;
    if (isMounted && !showDiv) {
      setShowDiv(true);
    } else if (!isMounted && showDiv) {
      timeoutId = setTimeout(() => setShowDiv(false), delayTime); //delay our unmount
    }
    return () => clearTimeout(timeoutId); // cleanup mechanism for effects , the use of setTimeout generate a sideEffect
  }, [isMounted, delayTime, showDiv]);
  return showDiv;
}

We introduce a new variable isMounted that will indicate if our user click button (Show/Hide) , based on that useDelayUnmount will give ShowDiv a certain time before switching its value , with that our animation will affect Div element before remove it from DOM.

FullVersion :



import React, { useEffect, useState } from "react";

function useDelayUnmount(isMounted, delayTime) {

  const [showDiv, setShowDiv] = useState(false);

  useEffect(() => {

    let timeoutId;

    if (isMounted && !showDiv) {

      setShowDiv(true);

    } else if (!isMounted && showDiv) {

      timeoutId = setTimeout(() => setShowDiv(false), delayTime); //delay our unmount

    }

    return () => clearTimeout(timeoutId); // cleanup mechanism for effects , the use of setTimeout generate a sideEffect

  }, [isMounted, delayTime, showDiv]);

  return showDiv;

}

const mountedStyle = { animation: "inAnimation 250ms ease-in" };

const unmountedStyle = {

  animation: "outAnimation 270ms ease-out",

  animationFillMode: "forwards"

};

export default function App() {

  const [isMounted, setIsMounted] = useState(false);

  const showDiv = useDelayUnmount(isMounted,250);

return (

    <div className="App">

      <button onClick={() => setIsMounted(!isMounted)}>Show/Hide</button>



//Conditional Rendering

 { showDiv &&

      <div

        className="transitionDiv"

        style={isMounted ? mountedStyle : unmountedStyle}

      ></div>

}

    </div>

  );

}

Demo :

link

That's all , Hope you learned something new :)