NextJS: how to use window in custom hook?

Question

ReferenceError: window is not defined

This errors raises on the server side, when NextJS tries to render the page. But you can use window in the useEffect hook as written here.

My question is how to create a custom hook. I tried to something like that:

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 here is used in useEffect. But I got the error, because when I call

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

NextJS do not recognize it.

How can I deal with it?

score 5 · Accepted Answer · answered Mar 01 '21 at 14:16

5

I'm not sure that solution is the best, but instead of window you can use globalThis which is equal to window on the client side.

answered Mar 01 '21 at 14:16

Yoskutik

1,859
2
17
43

score 2 · Answer 2 · answered Feb 28 '21 at 21:30

You're still getting the same error because window will still not be defined on the server when you call useEventListener(window, 'scroll', () => {...});. You should only reference window when inside the useEffect's callback.

For example, you could modify your existing custom hook to default to window if no target is defined.

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

Then you could call the hook like:

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

You could even remove the target param from the hook and always use window to make the usage and syntax simpler.

You forgot deps for useEffect. There is almost no use-cases for useEffect without deps. — DTXqueque, Dec 01 '22 at 05:41
@DTXqueque I didn't want to assume anything, as that's what OP had in his question. It's not related to his issue either way. — juliomalves, Dec 01 '22 at 07:04

NextJS: how to use window in custom hook?

2 Answers2