useEffect addEventListener code example

Example 1: passing event handler to useEffeect

const App =() => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [userText]); // ESLint will yell here, if `userText` is missing

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Example 2: react addeventlistener useeffect

//101-Example
const callback = useCallback((event: any) => {
      event.data.status === "complete" ? setProgress(0) : setProgress(event.data.uploadProgress);
    },[])
  
  useEffect(() => {
    window.addEventListener("file-upload", callback);
    return () => window.removeEventListener("file-upload", callback);
  }, [window, callback]);