useEffect() Hook in Next.JS - React Hooks

useEffect() Hook in Next.JS - React Hooks

2 min read · 307 words · Shared August 9, 2021 by

Article Summary: Learn what useEffect is learn how to use useEffect in Next.JS.

What Are React Hooks?

Released in React 16.8, React Hooks allow you to you use state and other React features without writing a class.

Here is a simple example from the reactjs.org website:

import React, { useState } from 'react'; // <--- import the hook

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0); // <--- useState is the hook

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

As you can see, we can create a state variable named count in only one line using the useState hook.

Using useEffect In Next.JS

Adding the useEffect() (or Effect Hook) hook in Next.js is not at bad as one would think. 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!

1

Import useEffect from react

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

Call the method and add code

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)
    }

Conclusion

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

Published on August 09, 2021 (August 9, 2021)

Related Tags

    #react

Related Posts

Next.js Progressive Web App · 20 days ago
useState() Hook in Next.JS - React Hooks · 24 days ago
Add Algolia's InstantSearch to Next.js - A Quickstart · December 17, 2021
Next/Image Doesn't Fill Parent Div! · November 1, 2021
Chakra UI Menu Dropdown on Hover · October 27, 2021

Email Newsletter

On This Page

What Are React Hooks?

Using useEffect In Next.JS

Import useEffect from react

Call the method and add code

Conclusion

View Related Posts

20 days ago

nextjs-light.png

Next.js Progressive Web App

24 days ago

react.png

useState() Hook in Next.JS - React Hooks

December 17, 2021

algolia.png

Add Algolia's InstantSearch to Next.js - A Quickstart

November 1, 2021

nextjs-light.png

Next/Image Doesn't Fill Parent Div!

October 27, 2021

chakra-ui.png

Chakra UI Menu Dropdown on Hover

September 27, 2021

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

September 26, 2021

firebase.png
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

August 29, 2021

chakra-ui.png

Advanced Chakra UI

July 20, 2021

splitbee.png

Add Splitbee Analytics To Next.js

July 10, 2021

nextjs-light.png

Next.js Crash Course

May 10, 2021

nextjs-light.png

Next.js + MDX Pages Quickstart

May 1, 2021

utterances.png

Add Comments To React/Next.js Website

April 29, 2021

google-analytics.png

Add Google Analytics To Next.js Website

April 15, 2021

firebase.png

Connect Firebase To Next.js


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.