Así es como se ve mi aplicación.
Aplicación.js
const Home = () => { const [inputValues, setInputValues] = useState(...); const word = generateRandomWord(); // how to make the word not changing return (...)generarRandoPalabra.js
export const generateRandomWord = () => { // return a random word in string } Cada vez que los inputValues de entrada cambien, el componente Home se volverá a representar y el valor de la word también será diferente. ¿Cómo se puede hacer que el valor de la word permanezca invariable?
Puedes usar el gancho useMemo :
const word = useMemo(() => generateRandomWord(), []);La palabra se regenerará cuando un valor en la matriz de dependencias haya cambiado. Si pasa una matriz vacía, el valor siempre será el mismo entre renderizaciones.
También puede considerar almacenar el resultado en un estado para que pueda cambiarlo más tarde si lo necesita.
const Home = () => { const [inputValues, setInputValues] = useState(...); const [word, updateWord] = useState(generateRandomWord()); return (...)