react - how to make the value of a variable remain unchanged when the component re-render

Question

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?

Answer 1

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.

https://reactjs.org/docs/hooks-reference.html#usememo

Answer 2

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 (...)