React: onClick handler is getting called on every render?

by

onClick expects a function. An arrow function does not have its own this; the this value of the enclosing execution context is used.
Arrow function is a replacement for the following

onClick={this.handleClick.bind(this,i)}

It doesn’t work when you run it like 

onClick={this.handleClick(i)}

because in this case it will call a function and that will pass a return value that will be evaluate everytime render is called. So if you are doing somethings in the onClick function that causes a rerender for instance setState you app will go in an endless loop. Thus onClick needs a function and not a value so unless you are returning a function from the onClick handler you should not directly call it.

Arrow function above performs the role of binding the parameter to the function

More Related Contents:

  1. We simply cannot write “ in ReactJS?
  2. Dynamic tag name in React JSX
  3. What are React controlled components and uncontrolled components?
  4. Clear and reset form input fields
  5. forEach() in React JSX does not output any HTML
  6. Starter create-react-app with IE11 polyfill import still aborts in IE11
  7. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  8. how to cancel/abort ajax request in axios
  9. Simple Conditional Routing in Reactjs
  10. Internal implementation of “makeStyles” in React Material-UI?
  11. How to combine multiple inline style objects?
  12. When do I choose React state Vs Redux Store
  13. Redux: Why is avoiding mutations such a fundamental part of using it?
  14. React Router not working with Github Pages
  15. React.useState does not reload state from props
  16. TypeError: evt.target is null in functional setState
  17. Default property value in React component using TypeScript
  18. Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps
  19. React Router 4 Nested Routes not rendering
  20. React passing parameter via onclick event using ES6 syntax
  21. React fetch data in server before render
  22. React router 4 does not update view on link, but does on refresh
  23. ReactJS difference between stateful and stateless
  24. Why useEffect doesn’t run on window.location.pathname changes?
  25. Call child component method from parent in react
  26. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  27. How to bundle a React app to a subdirectory on a server?
  28. ESLint Must use destructuring state assignment
  29. How do I window removeEventListener using React useEffect
  30. Cannot find module ‘sass’

Leave a Comment