Category: React

Sometimes, we want to update React component every second with JavaScript.

In this article, we’ll look at how to update React component every second with JavaScript.

How to update React component every second with JavaScript?

To update React component every second with JavaScript, we can use the setInterval function to update a state in the useEffect hook.

For instance, we write

const [time, setTime] = useState(Date.now());

useEffect(() => {
  const interval = setInterval(() => setTime(Date.now()), 1000);
  return () => {
    clearInterval(interval);
  };
}, []);

in a function component.

We get set the initial value of time to the timestamp returned by Date.now.

Then in the useEffect callback, we call setInterval with a callback that calls setTime with Date.now() to update the time to the current timestamp.

And we call it with 1000 to do that every second.

We return a callback that calls clearInterval with interval to clear the timer when we unmount our component.

The useEffect callback runs once when we mount our component since we called it with an empty array.

Conclusion

To update React component every second with JavaScript, we can use the setInterval function to update a state in the useEffect hook.

Sometimes, we want to add images in public folder with React.

In this article, we’ll look at how to add images in public folder with React.

How to add images in public folder with React?

To add images in public folder with React, we get the path to the public folder with process.env.PUBLIC_URL and concatenate the relative image path to it.

For instance, we write

<img src={process.env.PUBLIC_URL + "/img/logo.png"} />;

to add the img element with the src attribute of the image set to process.env.PUBLIC_URL + "/img/logo.png" to load the image from the /img/logo.png file in the public folder.

We use process.env.PUBLIC_URL to get the path to the public folder.

Conclusion

To add images in public folder with React, we get the path to the public folder with process.env.PUBLIC_URL and concatenate the relative image path to it.

Sometimes, we want to detect Esc key press in React and handle it with JavaScript.

In this article, we’ll look at how to detect Esc key press in React and handle it with JavaScript.

How to detect Esc key press in React and handle it with JavaScript?

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

For instance, we write

import React, { useEffect } from "react";

const useEscape = (onEscape) => {
  useEffect(() => {
    const handleEsc = (event) => {
      if (event.keyCode === 27) onEscape();
    };
    window.addEventListener("keydown", handleEsc);

    return () => {
      window.removeEventListener("keydown", handleEsc);
    };
  }, []);
};

export default useEscape;

to create the useEscape hook that listens for the esc key press by listening to the keydown event.

In the handleEsc event handler, we listen for keyCode 27, which is the esc key press.

We remove the event handler with removeListener when we unmount the component that uses the hook.

Then we use it in our component by calling useEscape with a callback that does something when esc is pressed like

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false));

Conclusion

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.