Pude obtener una nueva cita cada vez que vuelvo a renderizar, pero ahora quiero agregar una funcionalidad en la que tengo la opción de reproducir la misma cita y no obtener una nueva si presiono el botón de repetición de cita, sin embargo, sigo quiere llamar al useEffect. La solución a esto suena muy sencilla, sin embargo, no sé cómo abordarla con useEffect en juego.
Además, al usar reaccionar, ¿es mejor usar ganchos de referencia, en lugar de document.getElementByID?
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> ); }Puede refactorizar de esta manera con la función asíncrona dentro useEffect y no necesita usar este tipo de document.getElementById("quoteDisplay").innerText js. Puedes hacerlo con estados de reacción.
Aquí está el ejemplo de trabajo https://codesandbox.io/embed/distracted-shamir-sfinbd?fontsize=14&hidenavigation=1&theme=dark
import "./styles.css"; import { useEffect, useState } from "react"; export default function App() { const [quote, fecthNewQuote] = useState(0); const [display, setDisplay] = useState(""); useEffect(() => { async function newQuote() { const response = await fetch("https://api.quotable.io/random"); const data = await response.json(); setDisplay(data.content); } newQuote(); }, [quote]); console.log(); return ( <div className="App"> <div id="quoteDisplay">{display}</div> <div id="newQuoteCounter">New Quote Counter: {quote}</div> <div id="quoteReplayedCounter"> Quote Replayed Counter: 0 </div> <button id="newQuoteButton" onClick={() => fecthNewQuote(quote + 1)}> Fetch New Quote </button> <button id="keepSameQuote">Keep Same Quote</button> </div> ); }