UseEffect In Next.JS - React Hooks

Introduction#

React hooks allow you to perform side effects in function components. In this post, we will take a look at useEffect and give examples of how to use in in next.js.

Using useEffect In Next.JS#

Let's take a look at an example. We will use useEffect to add an event listener to handle when a user scrolls. We will then log to the console the scrollY value. This is how this website dynamically adds the css to the nav bar on scroll!

First, we will import useEffect from react.

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

Next, call the method:

useEffect(() => {
        
    })

We can add anything we want in here. Let's add our event listeners:

useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    })

Finally, create the handle scroll method and log the scrollY value to the console:

const handleScroll = () => {
        console.log(scrollY)
    }

And that's it! Check out my YouTube channel for more coding tutorials!