How to re-render divs using ref keeping the declaration order?

Question

Lets say I have ref variable that contains a list of divs:

const refDivs = useRef()

This ref has the format { current = [divC1,divC2,divC3,divC1,divC2,divC4]} and is filled using :

I need to re-render the ref variable content in somewhere else -after doing some extra calculations- but the order is altered (e.g. { current = [divC4,divC2,divC3,divC1,divC1,divC2]} - sometimes its different) . I believe this is because rendering is async (right?). So, what would be the best way to ensure the order of this new renders keep the same order as the original one?

{refDivs.current.map(d=>d)}

I tried using like an index prop in the ref object , and order the items before re-rendering again, but its difficult to keep track of the hundreds of components I have (c4,c5, ... c100)

So basically what I want to see is the following :

user_7647064 · Answer

Here is the example for you - everything is ok:

const C1 = (props) => {
    const ref = React.useRef(null);
    React.useEffect(() => {
      if (!props.parentRef.current) props.parentRef.current = [];
      if (props.parentRef.current.indexOf(ref.current)) {
          props.parentRef.current.push(ref.current);
      }
    }, []);

    return C1
}
const C2 = (props) => {
    const ref = React.useRef(null);
    React.useEffect(() => {
      if (!props.parentRef.current) props.parentRef.current = [];
      if (props.parentRef.current.indexOf(ref.current)) {
          props.parentRef.current.push(ref.current);
      }
    }, []);

    return C2
}
const C3 = (props) => {
    const ref = React.useRef(null);
    React.useEffect(() => {
      if (!props.parentRef.current) props.parentRef.current = [];
      if (props.parentRef.current.indexOf(ref.current)) {
          props.parentRef.current.push(ref.current);
      }
    }, []);

    return C3
}
const C4 = (props) => {
    const ref = React.useRef(null);
    React.useEffect(() => {
      if (!props.parentRef.current) props.parentRef.current = [];
      if (props.parentRef.current.indexOf(ref.current)) {
          props.parentRef.current.push(ref.current);
      }
    }, []);

    return C4
}

const C = (props) => {
  return {props.children}
}

const App = () => {
  const refDivs = React.useRef();
  const [divs, setDivs] = React.useState([]);

  React.useEffect(() => {
    setDivs(refDivs.current);
  }, [])
  return(
    
      Original divs  
        
          
          
          
        
        
          
          
          
        
      
        Referred divs
         {
              return html + div.outerHTML}, '')
            }
        }/>
      
    
  );
}


ReactDOM.render(,
document.getElementById("root"))

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  width: 300px;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}

How to re-render divs using ref keeping the declaration order?

1 Answers