Forem: Nevo Golan

Is an HTML element in the viewport? with React hooks

Nevo Golan — Sun, 31 Jan 2021 21:07:40 +0000

During the process of developing my blog, I decided to create a comments section based on the GitHub issues system (more about this subject, in a future blog post). To avoid unnecessary API calls and make a better UX, I decided to fetch data from the GitHub API only when the comments section is in the browser viewport.

I searched for an article or a video tutorial for creating a simple useIsInViewport custom hook that will help me solve this issue. However, most of the search results were libraries, and I did not want to add an external library for such a simple task. Therefore, I decided to build my own custom hook.

I hope this blog post will help you create your own simple but powerful useIsInViewport custom hook.

Wrap `IntersectionObserver` into custom hook

The simplest way to determine if an HTML element is in the browser viewport is to use the browser native API IntersectionObserver. The IntersectionObserver is a class that receives a callback as an argument into its constructor. The callback will be triggered every time one of the observed HTML elements will appear in the browser viewport. The IntersectionObserver has four methods:

observe - receives an HTML element as an argument and instructs the instance to observe this element.
unobserve - receives an HTML element as an argument and instructs the instance to stop observe this element.
disconnect - will instruct the instance to stop observe all HTML elements declared before.
takeRecords - return an array of all HTML elements the instance observes.

Let's start by wrapping the functionality of IntersectionObserver into a custom React hook (we will call it useIsInViewport):

import { useRef, useEffect, useState } from 'react'

export default function useIsInViewport() {
  const elementRef = useRef()
  const [isInViewPort, setIsInViewPort] = useState(false)

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const isInViewPort = !!entries[0]?.isIntersecting

      setIsInViewPort(isInViewPort)
    })

    observer.observe(elementRef.current)

    return () => observer.disconnect()
  }, [])

  return { elementRef, isInViewPort }
}

In the example above, we created a ref and a state. The ref will be attached to the HTML element we want to track and determine whether it is inside or outside the browser viewport. According to that, the state will change.

Another important thing about this code implementation, it starts the observation process when the component mounts and stops it on unmount.

Let's see an example of how to use the useIsInViewport custom hook:

import useIsInViewport from '../hooks/use-is-in-viewport'

export default function Comments() {
  const { elementRef, isInViewPort } = useIsInViewport()

  useEffect(() => {
    if (!isInViewPort) {
      return;
    }

    // Fetch the data.
  }, [isInViewPort])

  return (
    <div ref={elementRef}>
      { /* all the comments */ }
    </div>
  )
}

Extend `useInViewPort` hook with `count` and `wasInViewport`

Sometimes, it is not enough to know whether an HTML element is in the browser viewport at the current time. We also need to know how many times the HTML element was in the browser viewport or if it appeared before. For example, in my case, all I needed to know was if the user scrolled to the comments HTML element. Then, the component should fetch comments data.

To achieve this goal of extending the useInViewPort hook, we will transform the simple state into an object with three properties:

isInViewport - returns boolean that represents whether at the current time the HTML element is in the browser viewport or not.
count - returns the number of times the HTML element entered the browser viewport.
wasInViewport - returns boolean that represents whether the HTML element was at least once in the browser viewport.

import { useRef, useEffect, useState } from 'react'

export function useIsInViewport() {
  const elementRef = useRef()
  const [{ isInViewPort, wasInViewPort, count }, setData] = useState({
    isInViewPort: false,
    wasInViewPort: false,
    count: 0
  })

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const isInViewPort = !!entries[0]?.isIntersecting

      setData((prev) => {
        const count = isInViewPort ? prev.count + 1 : prev.count

        return {
          isInViewPort,
          count,
          wasInViewPort: count > 0
        }
      })
    })

    observer.observe(elementRef.current)

    return () => observer.disconnect()
  }, [])

  return {
    elementRef,
    isInViewPort,
    count,
    wasInViewPort
  }
}

Here is how we can use those new pieces of state (just changed from isInViewport to wasInViewport):

import useIsInViewport from '../hooks/use-is-in-viewport'

export default function Comments() {
  const { elementRef, wasInViewPort } = useIsInViewport()

  useEffect(() => {
    if (!wasInViewPort) {
      return;
    }

    // Fetch the data.
  }, [wasInViewPort])

  return (
    <div ref={elementRef}>
      { /* all the comments */ }
    </div>
  )
}

Take advantage of `IntersectionObserver` options

IntersectionObserver API has options that help solve some issues. One of those options, and the most useful one, in my opinion, is the rootMargin. The rootMargin allows us to change the state of the isInViewport to true, a few pixels (or rem, em, etc.) before the HTML element enters the browser viewport. To take advantage of the rootMargin option, we need to pass it as an object property to the IntersectionObserver instance.

import { useRef, useEffect, useState } from 'react'

export function useIsInViewport(options) {
  // ...

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      // ...
    }, options)

    // ...
  }, [])

  // ...
}

Here is how it looks like in the component, using the isInViewport custom hook:

import useIsInViewport from '../hooks/use-is-in-viewport'

export default function Comments() {
  const { elementRef, wasInViewPort } = useIsInViewport({
    rootMargin: '500px',
  })

  // ...
}

To know more about the IntersectionObserver API options, check out this guide.

Conclusion

Sometimes a simple custom hook can solve the problem of determining whether an HTML element is in the browser viewport or not. For more battle-tested code, Here are some libraries to check out:

You should also check the IntersectionObserver API guide by "MDN Web docs": Intersection Observer API

That's it for now!

Let me know if you like this blog post in the comments below.

Watchers in React

Nevo Golan — Mon, 25 Jan 2021 19:21:55 +0000

Developing a React app can be very productive and fun, but if you are used to working with Vue as I do, I bet you miss some of those great and useful features. One of those features is Watchers. In this blog post, we will try to find out how to improve the current React API and create a custom hook to help us "watch" for state changes.

What are `Watchers` in React?

Before we try to understand what Watchers are specific in a React app, we should try to understand what Watchers are in general. Watchers are simple functions that listen for changes on one or more pieces of state. Watchers are very helpful and usually used when there is a requirement to interact with a component that lives outside the React world (side effects).

In the next example, we will build a search component. We will listen for changes in the input's value, and based on that, we will send a request to the server.

Using `useEffect` to watch for value changes

The best start is to use the useEffect hook. It should help us listen for changes in the input value and trigger a request to the server based on these changes. Let's see how it goes:

// SearchBox.jsx
import React, { useState, useEffect } from 'react'

export default function SearchBox() {
  const [value, setValue] = useState('')

  useEffect(() => {
    // Fetching logic...
  }, [ value ])

  return <input
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
}

This code should do the work, but two issues occur in the current implementation:

It fetches the data on the first render of the component (This is how useEffect works).
It fetches the data on each keystroke of the user (multiple times for no reason).

Let's try to resolve those issues.

Using `useRef` to avoid first render fetching

To avoid triggering fetch on the first render of the component, we can use a flag variable to determine if the current function call is the first. To do so, we will use the useRef hook. Let's see an example:

// SearchBox.jsx
import React, { useState, useEffect, useRef } from 'react'

export default function SearchBox() {
  const [value, setValue] = useState('')
  const isFirstRender = useRef(true)

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false

      return
    }

    // Fetching logic...
  }, [ value ])

  return <input
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
}

This current code can do the job, but we can take it to the next step by wrapping the implementation into a custom hook.

Create a custom hook: `useWatch`

By wrapping the watcher implementation into a custom hook, we will make the logic reusable and clean our component code.

// useWatch.js
import { useEffect, useRef } from 'react'

export default function useWatch( callback, deps ) {
  const isFirstRender = useRef(true)

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false

      return
    }

    callback();
  }, deps)
}

Here is the SearchBox component using the new hook we just created:

// SearchBox.jsx
import React, { useState } from 'react'
import useWatch from '../hooks/useWatch'

export default function SearchBox() {
  const [value, setValue] = useState('')

  useWatch(() => {
    // Fetching logic...
  }, [ value ])

  return <input
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
}

In the next step, we will try to solve the second issue, when the fetching mechanism triggers every keystroke.

Create a custom hook: `useDebouncedWatch`

To avoid multiple requests to the server, we could delay the fetching mechanism until the user stops typing. Then, and only then, we should trigger the function that fetches the data from the server.

// useDebouncedWatch.js
import { useRef } from 'react'
import useWatch from './useWatch'

export default function useWatch( callback, deps, delay = 1000 ) {
  const timeoutHandler = useRef(null)

  useWatch(() => {
    if (timeoutHandler.current) {
      clearTimeout(timeoutHandler.current)
    }

    timeoutHandler.current = setTimeout(() => {
      callback();
    }, delay)
  }, deps)
}

This implementation waits 1000 milliseconds and only then calls the callback function (which will, in our case, fetch data from the server). If the value changes again before those 1000 milliseconds, the previous timer stops, and a new timer starts to count. This loop will go on and on until the user stops typing.

Here is the final code from our SearchBox component uses the new custom hook:

// SearchBox.jsx
import React, { useState } from 'react'
import useDebouncedWatch from '../hooks/useDebouncedWatch'

export default function SearchBox() {
  const [value, setValue] = useState('')

  useDebouncedWatch(() => {
    // Fetching logic...
  }, [ value ])

  return <input
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
}

Conclusion

As we can see, Watchers exists in the React world. We just had to peel the shell and expose it out. With only a few steps, we included this elegant API from Vue into React world.

Forem: Nevo Golan

Is an HTML element in the viewport? with React hooks

Wrap IntersectionObserver into custom hook

Extend useInViewPort hook with count and wasInViewport

Take advantage of IntersectionObserver options

Conclusion

Watchers in React

What are Watchers in React?

Using useEffect to watch for value changes

Using useRef to avoid first render fetching

Create a custom hook: useWatch

Create a custom hook: useDebouncedWatch

Conclusion

Wrap `IntersectionObserver` into custom hook

Extend `useInViewPort` hook with `count` and `wasInViewport`

Take advantage of `IntersectionObserver` options

What are `Watchers` in React?

Using `useEffect` to watch for value changes

Using `useRef` to avoid first render fetching

Create a custom hook: `useWatch`

Create a custom hook: `useDebouncedWatch`