How to add "refs" dynamically with react hooks?

Question

So I have an array of data in and I am generating a list of components with that data. I'd like to have a ref on each generated element to calculate the height. I know how to do it with a Class component, but I would like to do it with React Hooks.

Here is an example explaining what I want to do:

import React, {useState, useCallback} from 'react'
const data = [
  {
    text: 'test1'
  },
  {
    text: 'test2'
  }
]
const Component = () => {
  const [height, setHeight] = useState(0);
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      {
        data.map((item, index) => 
          <div ref={measuredRef} key={index}>
            {item.text}
          </div>
        )
      }
    </div>
  )
}

Sagiv b.g · Accepted Answer · 2019-05-05 21:30:10Z

87

Not sure i fully understand your intent, but i think you want something like this:

const {
  useState,
  useRef,
  createRef,
  useEffect
} = React;

const data = [
  {
    text: "test1"
  },
  {
    text: "test2"
  }
];

const Component = () => {
  const [heights, setHeights] = useState([]);
  const elementsRef = useRef(data.map(() => createRef()));

  useEffect(() => {
    const nextHeights = elementsRef.current.map(
      ref => ref.current.getBoundingClientRect().height
    );
    setHeights(nextHeights);
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div ref={elementsRef.current[index]} key={index} className={`item item-${index}`}>
          {`${item.text} - height(${heights[index]})`}
        </div>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Component />, rootElement);

.item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}

.item-0 {
  height: 25px;
}

.item-1 {
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"/>

edited May 5, 2019 at 21:30

answered May 5, 2019 at 21:04

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Constantin Chirila Over a year ago

That's more or less what i needed. Thank you!

manelescuer Over a year ago

If you're using hooks, you should use useRef instead of createRef.

akshay Over a year ago

not working if data is dynamic changing(addition, deletion)

Sagiv b.g Over a year ago

@akshayYou can use a map object instead of an array

ultra_rn Over a year ago

This is not the proper approach since createRef will create a new ref on every render. Use this approach instead: stackoverflow.com/questions/54633690/…

|

Saeb Amini · Accepted Answer · 2024-10-09 06:56:44Z

There is no need for useEffect with side effects or other brittle approaches. According to the official guidance, you can use "ref callbacks".

React will call your ref callback with the DOM node when it’s time to set the ref, and with null when it’s time to clear it. This lets you maintain your own array or a Map, and access any ref by its index or some kind of ID. e.g:

import { useRef } from "react";

const data = [{
    id: 1,
    text: 'test1'
  },{
    id: 2,
    text: 'test2'
  }
]

const Component = () => {
  const refs = useRef(new Map());

  return (
    <div>
      {data.map((item) => (
        <div
         key={item.id}
         ref={el => el ? refs.current.set(item.id, el) : refs.current.delete(item.id)}>
          {item.text}
        </div>
      ))}
    </div>
  );
};

If your array doesn't have a natural ID, you can always fall back to the good ol' index with similar caveats as using it in other places for a key.

Ben West · Accepted Answer · 2019-05-05 20:05:11Z

-1

You have to use a separate set of hooks for each item, and this means you have to define a component for the items (or else you’re using hooks inside a loop, which isn’t allowed).

const Item = ({ text }) => {
    const ref = useRef()
    const [ height, setHeight ] = useState()
    useLayoutEffect(() => {
        setHeight( ref.current.getBoundingClientRect().height )
    }, [])
    return <div ref={ref}>{text}</div>
}

answered May 5, 2019 at 20:05

Ben West

4,5861 gold badge19 silver badges17 bronze badges

3 Comments

Constantin Chirila Over a year ago

I thought there might be a way that I don't see... I am pretty new to hooks. I guess I will have to use a class component! Thank you for the answer!

Ben West Over a year ago

Sorry if it wasn’t clear, you can do it with hooks, just render <Item> inside data.map

srhuevo Over a year ago

this is the best and cleanest solution! the punctuation of the answer is an injustice

Collectives™ on Stack Overflow

How to add "refs" dynamically with react hooks?

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related