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!

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

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!