ReactJS bind(this)

by

DOM callbacks such as click events will set the this context to the DOM element itself, in this case the li. Try removing the part you don’t understand and see what happens – you’ll see something like this.setState is not defined, because that function isn’t defined in the context of the li element (it’s basically looking for li.setState).

What bind is doing on that line is ensuring that whenever that function gets called, it will get called with the this context we want, in this case the Popular component – e.g. Popular.setState.

These days it’s getting more and more common to see folks just using fat arrow syntax as a shorthand to preserve the this context – e.g. in this case onClick={ () => this.updateLanguage(lang) }.

(note for those concerned about performance: the fat arrow approach is cleaner but somewhat controversial since it’s repeatedly declaring the function on every single render. That said, some folks claim there is minimal or no significant performance impact.)

More Related Contents:

  1. Why can’t I directly modify a component’s state, really?
  2. How to update nested state properties in React
  3. React / JSX Dynamic Component Name
  4. How can I use multiple refs for an array of elements with hooks?
  5. console log the state after using useState doesn’t return the current value [duplicate]
  6. How do I render components with different layouts/elements using react-router-dom v6
  7. Update style of a component onScroll in React.js
  8. Rendering React Components from Array of Objects
  9. How to perform debounce?
  10. How to add custom html attributes in JSX
  11. How to assign refs to multiple components
  12. Access Control Origin Header error using Axios
  13. How to prevent re-rendering of components that have not changed?
  14. In ReactJS, why does `setState` behave differently when called synchronously?
  15. React.js ES6 avoid binding ‘this’ to every method
  16. Adding a new line in a JSX string inside a paragraph – React
  17. Save data in a special order when click on button
  18. Axios posting params not read by $_POST
  19. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  20. React.js Serverside rendering and Event Handlers
  21. React, losing saved data in localStorage with useEffect after page refresh
  22. es6 – import all named module without alias
  23. Detect change in query param react-router-dom v4.x and re-render component
  24. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  25. Webpack 5 – Uncaught ReferenceError: process is not defined
  26. Using document.querySelector in React? Should I use refs instead? How?
  27. How to render element on click of button: ReactJS
  28. Jest spyOn function called
  29. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  30. State not getting updated when calling the related setState in React

Leave a Comment