React.js: the most efficient way to pass a parameter to an event handler without bind() in a component

by

Instead of .binding or creating an anonymous arrow function in render(), you can create the bound/anonymous function outside of render(), such as on the instantiated object, in the constructor, or something like that, and use a reference to that singular (never re-created) function. For example, run once:

this.boundHandleClick = this.handleClick.bind(this, 111);

or

this.boundHandleClick = () => this.handleClick(111);

Then, in render, reference boundHandleClick:

return (
  <div className="App">
    <button onClick={this.boundHandleClick}>Click</button>
  </div>
);

If you need to use the parameters (111) inside of render, then you could use object lookup to see if a bound function with that parameter exists yet. If it does, just use that bound function – else, create it (once, so it won’t have to be created again whenever you use that parameter in the future):

this.boundClicks = {};
// ...
if (!this.boundClicks['111']) this.boundClicks['111'] = () => this.handleClick(111);
return (
  <div className="App">
    <button onClick={this.boundClicks['111']}>Click</button>
  </div>
);

More Related Contents:

  1. numberic as object key, value as array [closed]
  2. React-router URLs don’t work when refreshing or writing manually
  3. Programmatically Navigate using react-router
  4. ReactJS component names must begin with capital letters?
  5. The create-react-app imports restriction outside of src directory
  6. Invariant Violation: Objects are not valid as a React child
  7. react-router scroll to top on every transition
  8. What the difference of this.state and this.setstate in ReactJS?
  9. React.js: onChange event for contentEditable
  10. How to update single value inside specific array item in redux
  11. Updating and merging state object using React useState() hook
  12. componentDidMount equivalent on a React function/Hooks component?
  13. How do I update states `onChange` in an array of object in React Hooks
  14. React – State not updated
  15. React Native: Getting the position of an element
  16. Can I update a component’s props in React.js?
  17. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  18. Embedding SVG into ReactJS
  19. useEffect does not listen for localStorage
  20. setTimeout for this.state vs useState
  21. Update React component every second
  22. How can I disable all typescript type checking?
  23. how to set displayName in a functional component [React]
  24. React code throwing “TypeError: this.props.data.map is not a function”
  25. Why need useRef and not mutable variable?
  26. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  27. How do I add validation to the form in my React component?
  28. Type ‘void’ is not assignable to type ‘((event: MouseEvent) => void) | undefined’
  29. Service Worker registration error: Unsupported MIME type (‘text/html’)
  30. Proper way of using React hooks + WebSockets

Leave a Comment