How can I use multiple refs for an array of elements with hooks?

by

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>
    ));
}

More Related Contents:

  1. State not updating when using React state hook within setInterval
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. Wrong React hooks behaviour with event listener
  7. React hooks – right way to clear timeouts and intervals
  8. React Hooks useState() with Object
  9. Multiple calls to state updater from useState in component causes multiple re-renders
  10. What’s the difference between `useRef` and `createRef`?
  11. Why React Hook useState uses const and not let
  12. React useEffect causing: Can’t perform a React state update on an unmounted component
  13. How to prevent re-rendering of components that have not changed?
  14. How target DOM with react useRef in map
  15. How to programmatically clear/reset React-Select?
  16. React – useState – why setTimeout function does not have latest state value?
  17. What does useCallback/useMemo do in React?
  18. React Hooks useState+useEffect+event gives stale state
  19. How to add “refs” dynamically with react hooks?
  20. Do we still need functional setState way in react hooks?
  21. Why can’t React Hooks be called inside loops or nested function?
  22. How to set initial state for useState Hook in jest and enzyme?
  23. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  24. React Hook “useEffect” is called conditionally
  25. TypeError dispatcher.useState is not a function when using React Hooks
  26. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  27. Performance penalty of creating handlers on every render with react-hooks
  28. Function inside functional component in React hooks – Performance
  29. useState hook, setState function. Accessing previous state value
  30. Why would we use useEffect without a dependency array?

Leave a Comment