Error: React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render

Question

Getting a build error usecallback hook called conditinally. if i dont use useCallback i get the error JSX props should not use arrow functions
const LinkComp = <T extends {}>(props: LinkProps & T extends AnchorProps? AnchorProps: ButtonProps) => { const { title, hideTitle, children, url = '', action, label, newWindow, className, iconName, isExternal, inheritColor = true, underlineOnHover = true, underline = false, theme = '', bold = false, onClick, modal = false, forceAnchorTag = false, appendQueryParams = true, showOutline = true, ...linkProps } = props; const [handleClick] = useRouter(action, url); const forwardedParams = useSelector(selectForwardedQueryParams);

const linkContent = (
    <>
        {iconName && <Icon name={iconName} className='mr-3' />}
        {!hideTitle && (title || children)}
    </>
);

if (modal) {
    if (linkProps.modalTitle) delete linkProps.modalTitle;

    return (
        <button {...(anchorProps as ButtonProps)} role='link' onClick={onClick as ButtonProps['onClick']}>
            {linkContent}
        </button>
    );
}

// queryString.stringifyUrl combines the params from both url and forwarded params.
// don't append the params for `tel` links
const forwardedParamsUrl = queryString.stringifyUrl({ url, query: !url?.includes('tel:') && forwardedParams });

const handleAnchorClick = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>  {
    if (handleClick) handleClick(e);
    
    return true;
},[handleClick]);

if (forceAnchorTag) {
    return (
        <a href={forwardedParamsUrl} {...(anchorProps as AnchorProps)} onClick={handleAnchorClick}>
            {linkContent}
        </a>
    );
}
// search extras uses the query params in a different way, so no need to append them here
const fullUrl = appendQueryParams ? forwardedParamsUrl : url;

return (
    <Link href={fullUrl} passHref={isExternal || newWindow}>
        <a {...(anchorProps as AnchorProps)} onClick={handleClick}>
            {linkContent}
        </a>
    </Link>
);

};

export default LinkComp;

Answer 1

You shouldn't be passing a function into a useCallback hook. Why are you doing that?