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> </> );}