React functional component - using inline functions for handlers affects performance? React functional component - using inline functions for handlers affects performance? reactjs reactjs

React functional component - using inline functions for handlers affects performance?


Using inline arrow functions is the recommended way in React Docs - Hooks API Reference. (see below)

I think useCallback would cause more of a performance impact then creating a new function each time.

function Counter({initialCount}) {  const [count, setCount] = useState(initialCount);  return (    <>      Count: {count}      <button onClick={() => setCount(initialCount)}>Reset</button>      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>    </>  );}