title: Using document.querySelector in React? Should I use refs instead? How?
body: <p>I am building a carousel right now, in React. To scroll to the individual slides I am using <code>document.querySelector</code> like so :</p>
  
  <pre><code>useEffect(() =&gt; {
      document.querySelector(`#slide-${activeSlide}`).scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'nearest'
      });
    }, [activeSlide]);
  </code></pre>
  
  <p>Is this bad practice? After all, I am accessing the DOM directly here? What would be the React way of doing this? </p>
  
  <p>edit: full <code>return</code> method</p>
  
  <pre><code>return (
      &lt;&gt;
        &lt;button onClick={() =&gt; setActiveSlide(moveLeft)}&gt;PREV&lt;/button&gt;
        &lt;Wrapper id="test"&gt;
          {children.map((child, i) =&gt; {
            return (
              &lt;Slide id={`slide-${i}`} key={`slide-${i}`}&gt;
                {child}
              &lt;/Slide&gt;
            );
          })}
        &lt;/Wrapper&gt;
  
        &lt;button onClick={() =&gt; setActiveSlide(moveRight)}&gt;NEXT&lt;/button&gt;
      &lt;/&gt;
    );
  </code></pre>