view as:
summary
full text
list
bullets
filter by:
summaries
none

    React/Typescript Code blog

    Today I will be describing how to build a simple, performant React hook for tracking the window size as the user resizes a window. This approach uses requestAnimationFrame which places less burden on your UI thread because it is only called when the UI needs to be redrawn, instead of on every resize event.

    Tracking window size with React hooks

    Here is an example using React hooks and requestAnimationFrame. This also uses pure js without any libraries like lodash,

    import { useState, useEffect, useCallback } from 'react';

    const getSize = () => {
    return {
    width: window.innerWidth,
    height: window.innerHeight,
    };
    };
    export function useResize() {
    const [size, setSize] = useState(getSize());
    const handleResize = useCallback(() => {
    let ticking = false;
    if (!ticking) {
    window.requestAnimationFrame(() => {
    setSize(getSize());
    ticking = false;
    });
    ticking = true;
    }
    }, []);

    useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
    }, []);
    return size;
    }

    Here is a gist showing it in use: Img.tsx with useResize. Alternatively, you can see it in my repo here for more context.

    Some resources on why you should do this instead of debouncing your function:

    Thank you for coming to my Ted Talk.