As you cannot use hooks inside loops, here is a solution in order to make it work when the array changes over the time.

I suppose the array comes from the props :

const App = props => {
    const itemsRef = useRef([]);
    // you can access the elements with itemsRef.current[n]

    useEffect(() => {
       itemsRef.current = itemsRef.current.slice(0, props.items.length);
    }, [props.items]);

    return props.items.map((item, i) => (
      <div 
          key={i} 
          ref={el => itemsRef.current[i] = el} 
          style={{ width: `${(i + 1) * 100}px` }}>
        ...
      </div>
    ));
}

Update

New React Doc shows a recommended way by using map.

Check the Beta version here (Dec, 2022)

There are two ways

1. use one ref with multiple current elements

const inputRef = useRef([]);

inputRef.current[idx].focus();

<input
  ref={el => inputRef.current[idx] = el}
/>

const {useRef} = React;
const App = () => {
  const list = [...Array(8).keys()];
  const inputRef = useRef([]);
  const handler = idx => e => {
    const next = inputRef.current[idx + 1];
    if (next) {
      next.focus()
    }
  };
  return (
    <div className="App">
      <div className="input_boxes">
        {list.map(x => (
        <div>
          <input
            key={x}
            ref={el => inputRef.current[x] = el} 
            onChange={handler(x)}
            type="number"
            className="otp_box"
          />
        </div>
        ))}
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

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

2. use an Array of ref

   As the above post said, it's not recommended since the official guideline (and the inner lint check) won't allow it to pass.

   Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

   However, since it's not our current case, the demo below still works, only not recommended.

const inputRef = list.map(x => useRef(null));

inputRef[idx].current.focus();

<input
  ref={inputRef[idx]}
/>

const {useRef} = React;
const App = () => {
const list = [...Array(8).keys()];
const inputRef = list.map(x => useRef(null));
const handler = idx => () => {
  const next = inputRef[idx + 1];
  if (next) {
    next.current.focus();
  }
};
return (
  <div className="App">
    <div className="input_boxes">
      {list.map(x => (
      <div>
        <input
          key={x}
          ref={inputRef[x]}
          onChange={handler(x)}
          type="number"
          className="otp_box"
        />
      </div>
      ))}
    </div>
  </div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

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

All other options above are relying on Arrays but it makes things extremely fragile, as elements might be reordered and then we don't keep track of what ref belongs to what element.

React uses the key prop to keep track of items. Therefore if you store your refs by keys there won't be any problem :

const useRefs = () => {
  const refsByKey = useRef<Record<string,HTMLElement | null>>({})

  const setRef = (element: HTMLElement | null, key: string) => {
    refsByKey.current[key] = element;
  }

  return {refsByKey: refsByKey.current, setRef};
}

const Comp = ({ items }) => {
  const {refsByKey, setRef} = useRefs()

  const refs = Object.values(refsByKey).filter(Boolean) // your array of refs here

  return (
    <div>
      {items.map(item => (
        <div key={item.id} ref={element => setRef(element, item.id)}/>
      )}
    </div>
  )
}

Note that React, when unmounting an item, will call the provided function with null, which will set the matching key entry to null in the object, so everything will be up-to-date.

The simplest and most effective way is to not use useRef at all. Just use a callback ref that creates a new array of refs on every render.

function useArrayRef() {
  const refs = []
  return [refs, el => el && refs.push(el)]
}

Demo

<div id="root"></div>

<script type="text/babel" defer>
const { useEffect, useState } = React

function useArrayRef() {
  const refs = []
  return [refs, el => el && refs.push(el)]
}

const App = () => {
  const [elements, ref] = useArrayRef()
  const [third, setThird] = useState(false)
  
  useEffect(() => {
    console.log(elements)
  }, [third])

  return (
    <div>
      <div ref={ref}>
        <button ref={ref} onClick={() => setThird(!third)}>toggle third div</button>
      </div>
      <div ref={ref}>another div</div>
      { third && <div ref={ref}>third div</div>}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
</script>

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Update:

Here is a Typescript version of the hook that creates memoized callback refs and supports passing a custom key to each element ref.

import { MutableRefObject, useRef } from 'react'

type UseElementsRefResult<T extends HTMLElement = HTMLElement> = [
  /**
   * Map of DOM node refs identified by an auto-created key or custom one.
   */
  MutableRefObject<{ readonly [K: string | number]: T }>,

  /**
   * Creates a memoized callback ref for a DOM node.
   * If you expect the rendering order of nodes to change, use a custom key.
   *
   * @param customKey Key used to set/unset the node ref.
   */
  (customKey?: string | number) => (el?: T) => void,
]

/**
 * Hook that creates callback refs to manage DOM node refs of multiple elements.
 * Ensures refs remain stable even with re-renders. Use custom keys if the rendering order may change.
 */
export const useElementsRef = <T extends HTMLElement = HTMLElement>(): UseElementsRefResult<T> => {
  const elementRefs = useRef({
    current: {} as { [K: string | number]: T },
    callbacks: {} as Record<string | number, (el?: T) => void>,
  })

  // Resets index on every render; stable refs as long as the render order remains unchanged
  let currentIndex = 0

  return [
    elementRefs.current,
    (customKey) => {
      const { current: elements, callbacks } = elementRefs.current
      const autoKey = currentIndex++
      const key = customKey ?? autoKey

      // Memoize callback for stable ref assignment
      if (!callbacks[key]) {
        callbacks[key] = (el) => {
          // React is setting the ref for this node
          if (el != null) {
            elements[key] = el
            return
          }

          // React is clearing the node ref
          delete elements[key]
        }
      }

      return callbacks[key]
    },
  ]
}

Demo

const { render } = ReactDOM
const { useEffect, useRef, useState } = React

const useElementsRef = () => {
  const elementRefs = useRef({
    current: {},
    callbacks: {},
  })

  let currentIndex = 0

  return [
    elementRefs.current,
    (customKey) => {
      const { current: elements, callbacks } = elementRefs.current
      const autoKey = currentIndex++
      const key = customKey ?? autoKey

      // Memoize callback for stable ref assignment
      if (!callbacks[key]) {
        callbacks[key] = (el) => {
          // React is setting the ref for this node
          if (el != null) {
            elements[key] = el
            return
          }

          // React is clearing the node ref
          delete elements[key]
        }
      }

      return callbacks[key]
    },
  ]
}

const App = () => {
  const [elementsRef, createElementRef] = useElementsRef()
  const [third, setThird] = useState(false)

  useEffect(() => {
    console.log(elementsRef.current)
  }, [third])

  return (
    <div>
      <div ref={createElementRef()}>
        <button ref={createElementRef()} onClick={() => setThird(!third)}>toggle third div</button>
      </div>
      <div ref={createElementRef('custom-key')}>another div</div>
      { third && <div ref={createElementRef('third-div')}>third div</div>}
    </div>
  );
}

render(<App />, document.getElementById("root"))

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

Note that you shouldn't use useRef in a loop for a simple reason: the order of used hooks does matter!

The documentation says

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. (If you’re curious, we’ll explain this in depth below.)

But consider that it obviously applies to dynamic arrays... but if you're using static arrays (you ALWAYS render the same amount of components) don't worry too much about that, be aware of what you're doing and leverage it 😉

I use the useRef hook to create panels of data that I want to control independently. First I initialize the useRef to store an array:

import React, { useRef } from "react";

const arr = [1, 2, 3];

const refs = useRef([])

When initializing the array we observe that it actually looks like this:

//refs = {current: []}

Then we apply the map function to create the panels using the div tag which we will be referencing, adds the current element to our refs.current array with one button to review:

arr.map((item, index) => {
  <div key={index} ref={(element) => {refs.current[index] = element}}>
    {item}
    <a
      href="#"
      onClick={(e) => {
        e.preventDefault();
        onClick(index)
      }}
    >
      Review
    </a>
})

Finally a function that receives the index of the pressed button we can control the panel that we want to show

const onClick = (index) => {
  console.log(index)
  console.log(refs.current[index])
}

Finally the complete code would be like this

import React, { useRef } from "react";

const arr = [1, 2, 3];

const refs = useRef([])
//refs = {current: []}

const onClick = (index) => {
  console.log(index)
  console.log(refs.current[index])
}

const MyPage = () => {
   const content = arr.map((item, index) => {
     <div key={index} ref={(element) => {refs.current[index] = element}}>
       {item}
       <a
         href="#"
         onClick={(e) => {
           e.preventDefault();
           onClick(index)
         }}
       >
         Review
       </a>
   })
   return content
}

export default MyPage

It works for me! Hoping that this knowledge will be of use to you.

You can use an array(or an object) to keep track of all the refs and use a method to add ref to the array.

NOTE: If you are adding and removing refs you would have to empty the array every render cycle.

import React, { useRef } from "react";

const MyComponent = () => {
   // intialize as en empty array
   const refs = useRefs([]); // or an {}
   // Make it empty at every render cycle as we will get the full list of it at the end of the render cycle
   refs.current = []; // or an {}

   // since it is an array we need to method to add the refs
   const addToRefs = el => {
     if (el && !refs.current.includes(el)) {
       refs.current.push(el);
     }
    };
    return (
     <div className="App">
       {[1,2,3,4].map(val => (
         <div key={val} ref={addToRefs}>
           {val}
         </div>
       ))}
     </div>
   );

}

working example https://codesandbox.io/s/serene-hermann-kqpsu

Assuming that your array contains non primitives, you could use a WeakMap as the value of the Ref.

function MyComp(props) {
    const itemsRef = React.useRef(new WeakMap())

    // access an item's ref using itemsRef.get(someItem)

    render (
        <ul>
            {props.items.map(item => (
                <li ref={el => itemsRef.current.set(item, el)}>
                    {item.label}
                </li>
            )}
        </ul>
    )
}

With typescript passing all the eslint warnings

const itemsRef = useRef<HTMLDivElement[]>([]);

data.map((i) => (
  <Item
    key={i}
    ref={(el: HTMLDivElement) => {
      itemsRef.current[i] = el;
      return el;
    }}
  />
))

It <Item /> must be constructed using React.forwardRef

If I understand correctly, useEffect should only be used for side effects, for this reason I chose instead to use useMemo.

const App = props => {
    const itemsRef = useMemo(() => Array(props.items.length).fill().map(() => createRef()), [props.items]);

    return props.items.map((item, i) => (
        <div 
            key={i} 
            ref={itemsRef[i]} 
            style={{ width: `${(i + 1) * 100}px` }}>
        ...
        </div>
    ));
};

Then if you want to manipulate the items / use side effects you can do something like:

useEffect(() => {
    itemsRef.map(e => e.current).forEach((e, i) => { ... });
}, [itemsRef.length])

React will re-render an element when its ref changes (referential equality / "triple-equals" check).

Most answers here do not take this into account. Even worse: when the parent renders and re-initializes the ref objects, all children will re-render, even if they are memoized components (React.PureComponent or React.memo)!

The solution below has no unnecessary re-renders, works with dynamic lists and does not even introduce an actual side effect. Accessing an undefined ref is not possible. A ref is initialized upon the first read. After that, it remains referentially stable.

const useGetRef = () => {
  const refs = React.useRef({})
  return React.useCallback(
    (idx) => (refs.current[idx] ??= React.createRef()),
    [refs]
  )
}

const Foo = ({ items }) => {
  const getRef = useGetRef()
  return items.map((item, i) => (
    <div ref={getRef(i)} key={item.id}>
      {/* alternatively, to access refs by id: `getRef(item.id)` */}
      {item.title}
    </div>
  ))
}

Caveat: When items shrinks over time, unused ref objects will not be cleaned up. When React unmounts an element, it will correctly set ref[i].current = null, but the "empty" refs will remain.

You can avoid the complexity array refs bring in combination with useEffect by moving the children into a separate component. This has other advantages the main one being readability and making it easier to maintain.

const { useRef, useState, useEffect } = React;

const ListComponent = ({ el }) => {
  const elRef = useRef();
  const [elWidth, setElWidth] = useState();

  useEffect(() => {
    setElWidth(elRef.current.offsetWidth);
  }, []);

  return (
    <div ref={elRef} style={{ width: `${el * 100}px` }}>
      Width is: {elWidth}
    </div>
  );
};

const App = () => {

  return (
    <div>
      {[1, 2, 3].map((el, i) => (
        <ListComponent key={i} el={el} />
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

You can use a parent element to get a bunch of children elements.

In my case I was trying to get a bunch of inputs inside my form element. So I get the form element and use it to handle with all the inputs.

Something like this:

function Foo() {
    const fields = useRef<HTMLFormElement>(null);

    function handlePopUp(e) {
      e.preventDefault();
    
      Array.from(fields.current.children)
        .forEach((input: HTMLInputElement | HTMLTextAreaElement) => {
          input.value = '';
        });
    }

    return (
    <form onSubmit={(e) => handlePopUp(e)} ref={fields}>

      <input
        placeholder="Nome"
        required
        id="name"
        type="text"
        name="name"
      />
      <input
        placeholder="E-mail"
        required
        id="email"
        type="email"
        name="email"
      />
      <input
        placeholder="Assunto"
        required
        id="subject"
        type="text"
        name="subject"
      />
      <textarea
        cols={120}
        placeholder="Descrição"
        required
        id="description"
        name="description"
      />

      <button type="submit" disabled={state.submitting}>enviar</button>
    </form>  
    );
}

Despite the following answers are solving the issue:

• https://stackoverflow.com/a/56063129/3944992
• https://stackoverflow.com/a/60977523/3944992

There are still two suboptimal aspects:

1. In all these examples and solutions, the ref function is dynamic - it's a new function on every render. This means that on each render cycle, references are detached and reattached for every item (see example here). While this may not be a major concern, it's a practice I personally prefer to avoid.
2. If there are multiple places in the application where an array of references needs to be handled, it requires repeating the same boilerplate code for initializing the collection of references, handling refs for each item separately etc.

Solution

To address both of these issues, I've developed a library which I've successfully used for several years: react-refs-collection.

This library provides a consistent ref handler function for each item and offers a minimalistic API for working with a collection of refs:

const {getRefHandler, getRef} = useRefsCollection();

const focusItem = useCallback(inputId => {
    getRef(inputId).focus();
}, []);

return (
     <div>
         {inputs.map((input) => (
             <input
                 ref={getRefHandler(input.id)}
                 // ...restProps
             />
         ))}
    </div>
)

import React, { useRef } from "react";

export default function App() {
  const arr = [1, 2, 3];

  const refs = useRef([]);

  return (
    <div className="App">
      {arr.map((item, index) => {
        return (
          <div
            key={index}
            ref={(element) => {
              refs.current[index] = element;
            }}
          >
            {item}
          </div>
        );
      })}
    </div>
  );
}

Credits: https://eliaslog.pw/how-to-add-multiple-refs-to-one-useref-hook/

There are some rules of hooks so we should consider all the things related to react hooks.

To use multiple refs or list of refs we can do like that:

1. Declare a variable for refs inside functional component using React.useRef([]).
2. Simple example is given below. It is just the use of multiple refs

const refsElements = React.useRef([]) // this line will create a refs array like this {current:[]} const [items, setItems] = React.useState([1,2,3,4,5])

<div>
  {items.map((element, index) => (
    <div key={index} ref={refItem => refsElements.current[index]=refItem}}
      <p>{item}</p>
    </div>
  ))}
</div>

Proper way based on official guidelines

The answers here are a bit dated and require useEffect with side effects or other brittle approaches. There is no need for any of that. 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.

We can't use state because we need the ref to be available before the render method is called. We can't call useRef an arbitrary number of times, but we can call it once:

Assuming arr is a prop with the array of things:

const refs = useRef([]);
// free any refs that we're not using anymore
refs.current = refs.current.slice(0, arr.length);
// initialize any new refs
for (let step = refs.current.length; step < arr.length; step++) {
    refs.current[step] = createRef();
}

We can use an array ref to memoize the ref list:

import { RefObject, useRef } from 'react';

type RefObjects<T> = RefObject<T>[];

function convertLengthToRefs<T>(
  length: number,
  initialValue: T | null,
): RefObjects<T> {
  return Array.from(new Array(length)).map<RefObject<T>>(() => ({
    current: initialValue,
  }));
}

export function useRefs<T>(length: number, initialValue: T | null = null) {
  const refs = useRef<RefObjects<T>>(convertLengthToRefs(length, initialValue));

  return refs.current;
}

It is a demo:

const dataList = [1, 2, 3, 4];

const Component: React.FC = () => {
  const refs = useRefs<HTMLLIElement>(dataList.length, null);

  useEffect(() => {
    refs.forEach((item) => {
      console.log(item.current?.getBoundingClientRect());
    });
  }, []);

  return (
    <ul>
      {dataList.map((item, index) => (
        <li key={item} ref={refs[index]}>
          {item}
        </li>
      ))}
    </ul>
  );
};

I think it is cleaner and more real life condition solution when you work with real data and you need to address element by id:

const MyList = ()=>{
  const {listElements} = useListElements()
  
  const { getRefById, getItemRefFn } = useRefsList();
  const handleClick = (id: string)=>{
    getRefById(id)?.focus()
  }
  
  return <div>
    {listElements.map((item) => {
      const element_id = item?._id || '';
      
      return <div key={element_id} ref={getItemRefFn(element_id)} onClick={()=>handleClick(element_id)}>{element_id}</div>
    })}
  </div>
}

const useRefsList = () => {
  const refsList = useRef<Record<string, any>>({});
  const getItemRefFn = (_id: string) => (ref: any) => {
    refsList.current[_id] = ref;
  };
  const getRefById = (_id: string) => {
    return refsList.current[_id];
  };
  return { getItemRefFn, getRefById };
};

It also can be optimized for onClick handler and everything can be wrapped in callbacks (if necessary)

I prefer storing these in an object that can be stored and keyed by a unique ID. This reusable hook also ensures it is cleaned up when the hook is unmounted.

import { useCallback, useEffect, useRef } from "react";

export const useRefs = <T = HTMLElement>() => {
  const itemsRef = useRef<Record<string, T | null>>({});

  const setRef = useCallback((id: string, el: T | null) => {
    itemsRef.current[id] = el;
  }, []);

  const getRef = useCallback((id: string) => {
    if (!(id in itemsRef.current)) {
      console.warn(`id ${id} does not exist in itemsRef`);
      return null;
    }
    return itemsRef.current[id];
  }, []);

  const getAllRefs = useCallback(() => itemsRef.current ?? {}, []);

  useEffect(() => {
    // Clean up any extra references if needed
    itemsRef.current = { ...itemsRef.current };
    return () => {
      // Clean up when unmounted
      itemsRef.current = {};
    };
  }, []);

  return {
    getAllRefs,
    setRef,
    getRef,
  };
};

import { createRef } from "react";

const MyComponent = () => {
  const arrayOfElements = Array.from({ length: 10 }).map((_, idx) => idx + 1);
  const refs = arrayOfElements.map(() => createRef(null));

  const onCLick = (index) => {
    ref[index]?.current?.click();
  };

  return (
    <div>
      <h1>Defaults Elements</h1>
      {arrayOfElements.map((element, index) => (
        <div key={index} ref={refs[index]}>
          Default Elemnt {element}
        </div>
      ))}

      <h2>Elements Handlers</h2>
      {arrayOfElements.map((_, index) => (
        <button key={index} onClick={() => onCLick(index)}>
          Element {index + 1} Handler
        </button>
      ))}
    </div>
  );
};