Does the useCallback hook optimize the component if we don't pass a function in a prop?

Question

React

I was interviewing for a well-known taxi service. I was asked to write an input field component. I did this:

import React, { useState } from 'react';

const Input = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
};

export default Input;

The interviewers nodded, but noticed a problem in the optimization: "Each time the component is re-rendered, the input handler function will be re-created."

I didn't know how to fix it. I was shown the correct solution:

import React, { useState, useCallback } from 'react';

const Input = () => {
  const [value, setValue] = useState('');

  const handleChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return <input type="text" value={value} onChange={handleChange} />;
};

export default Input;

It's been a long time. I began to make such comments to colleagues at the review, but one day I was told that this optimization is only needed when we pass a function in a prop to a child component.

From another respected person, I heard that useCallbacka factory is created with the help, it remains alone, and each of its calls returns a new function. That is, there is still a point in optimization.

Tell me please. Does the hook useCallbackoptimize the component if we don't pass a function in a prop?

PS I understand that premature optimizations are often evil.

Answer 1