A Child ponent has got an array of ref who depend of parent props. I would like to update the ref list if props change without rerender my child ponent.

const childComponent = (props) =>
{
  // the array of ref item list
  const itemsRef = Array.from({ length: props.menuItems.length }, a => 
  useRef(null));

  useLayoutEffect(()=>
  {
   // enter anim new item ref...

  },[props.menuItem])


  return <ul>
    {props.menuItems.map((el,i) => 
      <li 
        key{i} 
        ref={itemsRef[i]}
        children={el.name}
     >}
  </ul>

}

itemsRef is not recalculate if parent updated pass a new list of menuItem by props.

How achieve this with hooks?

A Child ponent has got an array of ref who depend of parent props. I would like to update the ref list if props change without rerender my child ponent.

const childComponent = (props) =>
{
  // the array of ref item list
  const itemsRef = Array.from({ length: props.menuItems.length }, a => 
  useRef(null));

  useLayoutEffect(()=>
  {
   // enter anim new item ref...

  },[props.menuItem])


  return <ul>
    {props.menuItems.map((el,i) => 
      <li 
        key{i} 
        ref={itemsRef[i]}
        children={el.name}
     >}
  </ul>

}

itemsRef is not recalculate if parent updated pass a new list of menuItem by props.

How achieve this with hooks?

• javascript
• reactjs
• react-hooks

Share Follow edited May 9, 2019 at 14:24 BrownBe asked May 9, 2019 at 13:52 BrownBeBrownBe 98733 gold badges1111 silver badges2323 bronze badges 5

• What your doing here seems a little mixed up, I would personally just make each menuItem into another Component for rendering. Also there is nothing in this ponent that will trigger a redraw, you have no state. – Keith Commented May 9, 2019 at 14:07
• your assumption itemsRef is not recalculate if parent updated pass a new list of menuItem is wrong, you will get a new array each time the ponent is rerender, you can add a console.log to check it – Olivier Boissé Commented May 9, 2019 at 14:24
• the problem es from you are breaking the rules of the hooks reactjs/docs/… Don’t call Hooks inside loops, conditions, or nested functions calling useRef inside map is not valid – Olivier Boissé Commented May 9, 2019 at 14:28
• @OlivierBoissé you're right, my question is a little bit confiuse. My ponent is rerender but I have got a big error console message when new props is passed to ma chield ponent : React has detected a change in the order of Hooks called by... – BrownBe Commented May 9, 2019 at 14:31
• @OlivierBoissé If y can't call useRef inside a loop, how to get a list of DOM items ? – BrownBe Commented May 9, 2019 at 14:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You are breaking the Rules of Hooks Don’t call Hooks inside loops, conditions, or nested functions

A solution could be to use useRef to declare an instance variable which will be an array and use the ref callback to populate the elements in this array :

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

   return (
     <ul>
        {props.menuItems.map((el,i) => 
          <li 
            key={i} 
            ref={el => itemsRef.current[i] = el}
            children={el.name}
          />
        }
    </ul>
  );
}

If you don't want null values in the array, you can add an effect to keep the array length in sync with props.menuItems length (the effect will be called after the refs callbacks)

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