Document Query Selector replacement with ref if possible

[utkuakyuz]

Using document.querySelector to get a reference to the list container can be brittle. A more idiomatic and robust React approach is to use refs. The react-window List component provides an outerRef prop for this purpose.

You can refactor this by:

1. Creating a ref for the list container:

   const listContainerRef = useRef<HTMLDivElement>(null);

2. Passing it to the List component:

   <List
     // ... other props
     outerRef={listContainerRef}
   >
     {ViewerRow}
   </List>

3. Using the ref in your useEffect:

   const listContainer = listContainerRef.current;
   if (listContainer) {
     // ...
   }

This avoids querying the global document and makes the component more self-contained and predictable.

Originally posted by @gemini-code-assist[bot] in #2 (comment)

[utkuakyuz]

This issue also need to resolve
#9 (comment)

[SpringsTea]

I'm wondering if this ref issue could be related to a problem I've been having where rendering multiple <VirtualDiffViewer /> is giving some odd behavior.

I'm rendering 3 viewers inside of some tabs, and depending on which tab loads first, the other viewers get kinda messed up.

In the above screen shot is the top of my three viewers. They are all scrolled up as far as they can. You can see the first one starts on line 1, but the viewers that were rendered afterwards don't start at the first line, and I can't scroll up to them.

If you don't think this is related, I can create a new issue and try to replicate the issue.

[utkuakyuz]

Hello! Yes, I think you guessed right, using query selectors to access elements can cause issues when rendering multiple diff viewers.

I had been ignoring this problem until I needed to use several viewers myself. If you are also running into this issue, I can open a PR to fix it.

If it doesn't work, we will go through the problem and see what is wrong.

I will be sharing the results and new version soon.

[utkuakyuz]

Hey, I solved the issue by replacing queryselectors with proper refs.

You can try it with new published version 1.0.14.

If your problem is persisting, please create a new issue with reproduction.

I will be waiting for your response

@SpringsTea

[SpringsTea]

Awesome, that fixed my issue.
Cheers.