Leveraging Window Object in Custom Hooks with NextJS

Question

Leveraging Window Object in Custom Hooks with NextJS

ReferenceError: window is not defined

This issue arises on the server side when NextJS attempts to render the page. However, it is possible to utilize window within the useEffect hook by following the guidance provided here.

I am seeking advice on creating a custom hook. My attempt looks like this:

export const useEventListener = (
    target: EventTarget, event: string, listener: EventListenerOrEventListenerObject, trigger = true,
): void => {
    useEffect(() => {
        target.addEventListener(event, listener);
        trigger && target.dispatchEvent(new Event(event));
        return () => target.removeEventListener(event, listener);
    });
};

The window reference is utilized in the useEffect. Nonetheless, I encountered an error when using it in this manner:

useEventListener(window, 'scroll', () => {...});

NextJS does not recognize it. What steps can be taken to address this issue?

javascript reactjs typescript react-hooks next.js

Answer 1

Answer №1

I'm uncertain about the optimal solution, but you have the option to utilize globalThis instead of window, as it represents the same object on the client side.

Answer 2

I'm uncertain about the optimal solution, but you have the option to utilize globalThis instead of window, as it represents the same object on the client side.

Answer 3

Answer №2

The error persists because the window object is still not defined on the server when attempting to use

useEventListener(window, 'scroll', () => {...});

. It is advisable to only reference the window object within the callback of the useEffect.

To address this issue, you can update your custom hook to default to using the window object if no specific target is provided.

export const useEventListener = (
    target: EventTarget, 
    event: string, 
    listener: EventListenerOrEventListenerObject, 
    trigger = true
): void => {
    useEffect(() => {
        const t = target || window
        t.addEventListener(event, listener);
        trigger && t.dispatchEvent(new Event(event));
        return () => t.removeEventListener(event, listener);
    });
};

You can then use the hook as follows:

useEventListener(undefined, 'scroll', () => {...});

If desired, you could simplify the usage and syntax by eliminating the target parameter from the hook and always relying on the window object.

Answer 4

The error persists because the window object is still not defined on the server when attempting to use

useEventListener(window, 'scroll', () => {...});

. It is advisable to only reference the window object within the callback of the useEffect.

To address this issue, you can update your custom hook to default to using the window object if no specific target is provided.

export const useEventListener = (
    target: EventTarget, 
    event: string, 
    listener: EventListenerOrEventListenerObject, 
    trigger = true
): void => {
    useEffect(() => {
        const t = target || window
        t.addEventListener(event, listener);
        trigger && t.dispatchEvent(new Event(event));
        return () => t.removeEventListener(event, listener);
    });
};

You can then use the hook as follows:

useEventListener(undefined, 'scroll', () => {...});

If desired, you could simplify the usage and syntax by eliminating the target parameter from the hook and always relying on the window object.

Leveraging Window Object in Custom Hooks with NextJS

Answer №1

Answer №2

Similar questions

Guide on installing React packages during runtime

Guide to adding sound effects to your Vue 3 app using the Composition API

"When testing with an API client, NextJS 13 successfully returns a response, however, the same response

Newbie in JavaScript seeking help with JSON indexing: What could be causing my script using (for ... in) to fail?

Why do Material UI components fail to render in jsdom while using Jest?

Verifying if a number is present in a textbox when inserting text (without using setTimeout)

Troubleshooting: ngAnimate max-height failing to apply to specific element

Ways to showcase information in a grid column

Attempted to register two components under the identical name RTCVideoView in React Native

Establish a connection to Cosmos DB from local code by utilizing the DefaultAzureCredential method

Enhance Component Reusability in React by Utilizing Typescript

Performing JSON data extraction and conversion using JavaScript

"Encountering an issue with mounting components in React Unit Testing with Jest and Typescript

What is the reason for next-redux-wrapper double hydrating in the logger?

Exploring the world of unit testing in aws-cdk using TypeScript

Is there a way for me to adjust the font size across the entire page?

Trouble with using setState within onChange function

Interested in incorporating dynamic calendar entries in ASP C#?

Vue Router configuration functions properly when accessed through URL directly

What is the purpose of using double quotes within single quotes in JavaScript?