removeEventListener()methods. In React however, you can safely ignore them in most use cases. React provides its own system to define user interaction and does so with (don't be scared now) inline events.
<button onclick="myFunction" />) but work entirely differently.
onclickis changed to
onmouseoveris now defined by
ontouchstartwould be written as
onTouchStart— you get the picture.
Eventas could be assumed. Instead, React supplies its own wrapper for the native event object, named a
SyntheticEvent. The wrapper is part of React's event system and also works as a sort of normalizing layer to ensure cross-browser compatibility and, as opposed to some other browsers, it strictly follows the event specifications of W3C.
falsefrom the event handler. React forces us to explicitly call
preventDefault()- another fundamental difference to usage in the native Browser API.
addEventListener()and also safely and automatically removes them as soon as the component unmounts. How convenient!
undefinedin all of our event handlers.
onClickevent is added to increment the counter by one each time the user presses a button labelled
+1. But when the user clicks the button, instead of seeing the actual counter, they will receive an error message:
increase()event handler, we actually operate outside of the component instance. This means we cannot access
this.setState()resulting in our above error. While it might seem annoying, it is not actually something React has thought up but it's actually standard behavior for ES2015 classes. But fear not, there are a number of techniques to combat this:
render()method. We add a
.bind(this)to the reference of the class method:
this.props.increase === prevProps.increasewould yield
falseevery single time and possibly even lead to re-render of the component. Even if the function has not changed at all. Therefore, using this method is actually considered a performance bottleneck and should thus be avoided.
true. Thus, expensive
shouldComponentUpdate()calls can easily be avoided. However, using this method of binding the method to the class instance is not without problems either: if the component in question does not yet use a constructor, it will now certainly have to. In order to do this, we need to call the
super(props)method to pass the props of the component to the
React.Componentparent class. In the end, we end up writing the name of the method twice. Once on its own, and once to define and bind its
@babel/plugin-proposal-class-properties. But as most React setups already include this by default, I will assume that we can use class properties safely and without error. If this is not the case for some reason, event handler methods should always be bound in the constructor.
this, we access the
thisof the class instance instead.
window.onscroll. React's event system does not support global events outside of the component context but if you want to define native browser events you can do so in the
componentDidMount()method. You should pay attention though, whenever an event listener is added with
addEventListener(), these need to removed once you're done with them.
componentWillUnmount()method is the perfect place to do this. While it might seem annoying, global events can cause performance bottlenecks or even memory leaks if not removed properly as they would be added again each time a component is mounted and called multiple times.
SyntheticEvent. Its primary purpose is to ensure cross-browser compatibility. If you ever feel an urge to access the original event though (I actually never felt the need to), React provides it to you via the object property
SyntheticEventobject and native event object differ: the
SyntheticEventobject is short-lived and nullified shortly after the event callback has been called (mainly for performance reasons). Accessing properties of the event object is not possible anymore once outside the original event handler.
onChangeevent is registered that is added into a paragraph once the value in the text field has changed. In order to access the provided value, the
Eventobject provides a property called
targetallows us to access the element on which the event has been performed, the text field in our case. This in turn contains a
valueproperty which we can use to write the current value of the text field into state.
this.setState()uses an updater function or more precisely a callback. However, it happens outside of the event handler scope meaning the
SyntheticEventhas already been reset or
e.targetdoes not exist anymore.
SyntheticEventobject if, for example, it was wrapped within a
setTimeout()callback. We need to come up with another solution.
SyntheticEventanymore but only the variable which has been assigned a value from the
persist()method to keep a reference to the event in question. This could possibly be useful when trying to pass a
SyntheticEventobject to a callback function outside of the event handler.
e.persist()method is invoked. Second, the updater function can safely access
onAnimationStartetc (even if it seems a little odd at first).
this.setState()are accessed. Public Class Properties and Arrow Functions are the more elegant ways to do this.
addEventListener()API. If at all necessary, do not forget to remove the event when unmounting your component with
SyntheticEventobjects are „nullified“. Beware of using callback functions outside of the event handler. The event object might not exist anymore at the time of calling the callback.
event.persist()can force React to prevent resetting the event object to