[React: Ref callback] Use a ref callback to set a list of nodes #react #ref #useRef #dom

react-ref-callback.tsx

// https://beta.reactjs.org/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback

// in the function body
const itemsRef = useRef(null);

function getMap() {
  if (!itemsRef.current) {
    // Initialize the Map on first usage.
    itemsRef.current = new Map();
  }
  return itemsRef.current;
}


// on the element
{catList.map(cat => (
  <li
    key={cat.id}
    ref={(node) => {
      const map = getMap();
      if (node) {
        map.set(cat.id, node);
      } else {
        map.delete(cat.id);
      }
    }}
  />
))}