React hooks are the main way that we can create components.
Sometimes we have to register event handlers in our own components.
In this article, we’ll look at how to register native event handlers within React components.
Registering Native Event Handlers
We can register native event handlers with vanilla JavaScript.
We can call the addEventListener
method with a DOM element, window
or document
to register an event handler.
For instance, we can write:
import React, { useEffect } from "react";
export default function App() {
const handleUserKeyPress = (e) => {
console.log(e.which);
};
useEffect(() => {
window.addEventListener("keydown", handleUserKeyPress);
return () => {
window.removeEventListener("keydown", handleUserKeyPress);
};
}, []);
return <div></div>;
}
to register an event handler for the window
‘s keydown
event.
We just call addEventListener
to add the event listener.
And to remove the event listener when the component unmounts, we return a function that calls window.removeListener
to remove the keydown
event listener.
The function we return in the useEffect
callback only runs when the component unmounts.
The 2nd argument we passed into the useEffect
hook is an empty array, so the useEffect
callback runs only when we mount the component.
This should only be used for objects like window
and document
which aren’t part of the component since we can assign event handlers for them by assigning the correct props for the event handler.
Conclusion
We can register native event handlers for window
or document
in the useEffect
gook by calling addEventListener
.
And to remove the event listener when the component unmounts, we return a function that calls removeEventListener
to in the useEffect
callback to remove the event listener when the component unmounts.