useRefArray

[RobMayer]

/* useRefArray.js */
export default (list) => {
    const ref = React.useRef([]);

    React.useEffect(() => {
        ref.current = ref.current.slice(0, list.length);
    }, [list]);

    const getter = (index) => {
        return (element) => {
            ref.current[index] = element;
        }
    }

    return [ref, getter];
}

/* example.js */
export default ({ someList }) => {
    const [listRef, assignListRef] = useRefArray(someList);
    const comps = someList.map((item, index) => {
        return <div key={index} ref={assignListRef(index)}>{item.someText}</div>
    })
    return <div>{comps}</div>
}