Ref is strangely turning null in React

Active3 hr before
Viewed126 times

6 Answers


I am trying to make a component slidable with the mouse. But when releasing the mouse, the reference on one of the DOM element is becoming null during the execution and I don't understand why.,Just drag the elements and check the console. You will see that the ref is initially set correctly, but when releasing the mouse, the ref is gone.,Making statements based on opinion; back them up with references or personal experience.

 Pretag team - issue, fix, solve, resolve

It seems like React is calling the ref functions one time too many for each frame element, the first call with a null value, the second call with the expected value.,Notice that passing null into this user-defined ref function does not prevent any memory leaks, and on top of that it caused the end-user to have to write an extra conditional check.,NOTE, render() is not being called more than once, and I am setting this.frames to a new array inside render, then componentDidUpdate shows that it has double the length, with the first half of the values all null.

render() {
  const frames = []
  frames.length = this.props.totalFrames

  for (let i=0, l=frames.length; i<l; i+=1)
      frames[i] = i

  this.frames = []

  return (
          { =>
              <div className="frame" key={frame} ref={el => {this.frames.push(el)}}>
load more v

In order to simplify things even more, consider writing a function component:,Use callback refs when you have to dynamically set them,In order to clarify the examples included in this post, I created a simple cheat sheet that you can check anytime during your reading. The code is available in GitHub.

 Pretag team - issue, fix, solve, resolve

Refs provide a way to access DOM nodes or React elements created in the render method.,When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.,When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.

class MyComponent extends React.Component {
  constructor(props) {
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
load more v

We setInterval(fn, delay) where fn calls savedCallback.,We do setInterval(callback1, delay) with callback1 from first render.,Say we want to be able to pause our interval by passing null as the delay:

import React, { useState, useEffect, useRef } from 'react';

function Counter() {
  let [count, setCount] = useState(0);

  useInterval(() => {    // Your custom logic here    setCount(count + 1);  }, 1000);
  return <h1>{count}</h1>;
load more v

To get the basics out of the way, ref is set to the DOM node when it’s mounted, and set to null when the DOM node is removed. No surprises this far.,In contrast, componentWillUnmount and unmount useLayoutEffect() cleanup are called before the ref is unset, so that you get a chance to cleanup anything you’ve attached to the DOM node, as you can see in a sandbox.,Refs are set when the DOM is mounted or a ref prop is added.

load more v

Other "react-undefined" queries related to "Ref is strangely turning null in React"