useEffect examples

The useEffect hook is normally used for any side effect – whether that is to read from an external object or write to an external object. In the following sections, we are going to see two more examples: Finding the window size and Fetching an API resource.

Finding the window size

Let's say that we want to know the current browser window size at runtime so that a greeting title can fit perfectly onto the screen (see Figure 5.6):

Figure 5.6 – Finding the window size

This can be done normally with a CSS media query, but this time, we want to do it via JavaScript, as a runtime JavaScript variable obtained can be sent for purposes other than CSS usage:

const Greeting = () => {
  const [width, setWidth] = useState(0)
  
  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth)
    } ...