This is how my App looks.
App.js
const Home = () => {
const [inputValues, setInputValues] = useState(...);
const word = generateRandomWord(); // how to make the word not changing
return (...)
generateRandowWord.js
export const generateRandomWord = () => {
// return a random word in string
}
Every time inputValues changes, the Home component will be re-render, and the value of word is different too. How can make the value of word remain unchanged?
You can use the useMemo hook:
const word = useMemo(() => generateRandomWord(), []);
The word will be regenerated when a value in the dependencies array has changed. If you pass an empty array the value will always stay the same between rerenders.
You can also consider to store the result in a state so you can change it later if you need
const Home = () => {
const [inputValues, setInputValues] = useState(...);
const [word, updateWord] = useState(generateRandomWord());
return (...)