Javascript 如何有条件地在 useEffect 中获取

我可以在每次重新渲染时获取一个新的引用，但现在我想添加一个功能，在这个功能中，如果我按下replay quote按钮，我可以 Select 重播相同的引用，而不获取新的引用，但是我仍然想调用useEffect.这个问题的解决方案听起来非常直截了当，然而，我不知道如何在发挥效用的情况下处理它.

此外，在使用react时，最好使用ref hook，而不是document.getElementByID？

Code SandBox Link

import "./styles.css";
import { useEffect, useState } from "react";

async function newQuote() {
  const response = await fetch("https://api.quotable.io/random");
  const data = await response.json();

  return data.content;
}

async function genQuote() {
  document.getElementById("quoteDisplay").innerText = await newQuote();
}

export default function App() {
  const [quote, fecthNewQuote] = useState(0);

  useEffect(() => {
    genQuote();

    document.getElementById(
      "newQuoteCounter"
    ).innerText = `New Quote Counter: ${quote}`;

    document.getElementById("quoteReplayedCounter").innertext = ``;
  }, [quote]);

  console.log();

  return (
    <div className="App">
      <div id="quoteDisplay"></div>
      <div id="newQuoteCounter">New Quote Counter: 0</div>
      <div id="quoteReplayedCounter"> Quote Replayed Counter: 0 </div>
      <button id="newQuoteButton" onClick={() => fecthNewQuote((c) => c + 1)}>
        Fetch New Quote
      </button>
      <button id="keepSameQuote">Keep Same Quote</button>
    </div>
  );
}