React hook to autofocus on an element by a query selector

useAutofocus.js

import {useEffect, useState} from "react";
import trim from 'lodash/trim';

export default function useAutofocus() {

    const [querySelector, setQuerySelector] = useState(null);

    // Either a non-empty string OR null
    let normalizedQuerySelector = querySelector;
    if (typeof normalizedQuerySelector === 'string') {
        normalizedQuerySelector = trim(normalizedQuerySelector);
        if (normalizedQuerySelector === '') {
            normalizedQuerySelector = null;
        }
    } else {
        normalizedQuerySelector = null;
    }

    useEffect(() => {
        if (normalizedQuerySelector === null || !document) {
            return;
        }
        const element = document.querySelector(normalizedQuerySelector);
        if (!element) {
            return;
        }

        element.focus();

        // Reset the query selector, so that the api user can call us with the same selector multiple times in a row
        setQuerySelector(null);

    }, [normalizedQuerySelector]); // Make this effect re-fire only when querySelector changes

    return setQuerySelector;
};