When to use useMemo hook in react?

[ChrisHagedorn]

me just have smol brain

[fcasamento]

@ChrisHagedorn Hope to help. It consists of storing the return value of a function from the input values ​​(Parameters). That is, if a sum function takes parameters 2 and 3 and returns 5, these values ​​will be stored, and when this function is called with the same parameters, it will not need to redo the calculation to get the return value, since this function will be stored.

Source: https://gist.githubusercontent.com/LucasCalazans/cb653a56a48f8e53c539807b7eca8c9b/raw/b2a37fd68ab4e6b7a9a6ae9d9addb526697d1e1c/no-usememo-form.js

const rules = [
 '8 characteres',
 'lowercase word',
 'uppercase word',
];

// Lista de erros
const Errors = ({ active }) => {
  return active && (
    <ul>
      {rules.map((value, index) => (
        <li key={index}>{value}</li>
      ))}
    </ul>
  );
}

const CreateAccountForm = () => {
  const [password, setPassword] = useState('');
  const [showErrors, setShowErrors] = useState(false);

  const checkPassword = event => {
    const { value } = event.target;
    setShowErrors(value.length < 8);
    setPassword(value);
  };

  return (
    <form>
      <h1>Login</h1>
      <input placeholder="Email" />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={checkPassword}
      />
      <Errors active={showErrors} />
    </form>
  );
};

[ChrisHagedorn]

Makes sense. This would be for computationally expensive functions. Expensive by what measurement?

[Preetiraj3697]

The useMemo Hook can be used to keep expensive, resource intensive functions from needlessly running.