Dealing with callbacks as props in React


Don’t mix JSX and business-logic in one place, keep your code simple and understandable.
For small optimizations, you can cache function in class properties for classes or use the useCallback hook for function components. In this case, pure components won’t be re-rendered every time when their parent gets re-rendered. Especially, callbacks caching is effective to avoid excess updating cycles when you pass functions as a prop to PureComponents.
Don’t forget that event handler receives a synthetic event, not the original event. If you exit from the current function scope, you won’t get access to synthetic event fields. If you want to get fields outside the function scope you can cache fields you need.

Part 1. Event handlers, caching and code readability

React has quite a convenient way to add event handlers for DOM elements.
This is one of the first basic things that beginners face with.
class MyComponent extends Component {
render() {