I have a React Component Footer that uses a Custom Hook useLogoImageUrl that seems to be executed 51 times before throwing the following Minified React Error: Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. which states that: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. The Footer.js in question: import { useLogoImageUrl } from '../../../src/hooks/useLogoImageUrl'; const Item = ({ item }) => ( <div key={item.id}> <strong>{item.title}</strong> {item.children?.length > 0 && ( <ul> {item.children.map(subitem => ( <li key={subitem.id}> <a href={subitem.url}>{subitem.title}</a> </li> ))} </ul> )} </div> ); /** * Global Footer Component * * @param {Object} params * @param {string} params.logoImageUrl * @param {Array|null} params.menu * @param {string} params.instagramLink * @param {string} params.youtubeLink * ... * @param {string} params.sitemapLink * ... */ export const Footer = ({ menu = [], logoImageUrl, instagramLink, // ... sitemapLink, // ... }) => { const selectedLogoUrl = useLogoImageUrl(logoImageUrl); const currentYear = new Date().getFullYear(); const splitMenuData = menu?.reduce((acc, item, index) => { const chunkIndex = Math.floor(index / 2); if (!acc[chunkIndex]) { acc[chunkIndex] = []; } acc[chunkIndex].push(item); return acc; }, []); return ( <footer> <div> <div> <div> <a href="/" aria-label='logo'> <img src={selectedLogoUrl} alt="Logo" /> </a> <div> {/* Some hardcoded links */} </div> <div> {instagramLink && ( <a href={instagramLink} target="_blank" rel="noreferrer noopener"> <img src="/path/to/instagram.svg" alt="Instagram" /> </a> )} {/* ... */} </div> </div> <hr /> <nav> {splitMenuData?.map(row => row.map(item => ( <Item item={item} key={item.id} /> )) )} </nav> </div> <hr /> <div> <ul> {sitemapLink && ( <li> <a href={sitemapLink}>Sitemap</a> </li> )} {/* ... */} </ul> </div> </div> </footer> ); }; and the Custom Hook code: import { DEFAULT_LOGO_IMAGE_DARK_SRC, DEFAULT_HERO_IMAGE_LIGHT_SRC, STYLE_MODE_DARK, } from '../constants'; export const useLogoImageUrl = ( path, styleMode ) => { const isDark = styleMode === STYLE_MODE_DARK; return ( path || ( isDark ? DEFAULT_HERO_IMAGE_LIGHT_SRC : DEFAULT_LOGO_IMAGE_DARK_SRC ) ); }; I tried using the useMemo() hook in the component (where it shouldn't be!) and in the custom hook (where it should be!) like the following: import { useMemo } from '@wordpress/element'; import { DEFAULT_LOGO_IMAGE_DARK_SRC, DEFAULT_HERO_IMAGE_LIGHT_SRC, STYLE_MODE_DARK, } from '../constants'; export const useLogoImageUrl = ( path, styleMode ) => { console.log( styleMode ); const isDark = 'dark' === STYLE_MODE_DARK; return useMemo( () => { return ( path || ( isDark ? DEFAULT_HERO_IMAGE_LIGHT_SRC : DEFAULT_LOGO_IMAGE_DARK_SRC ) ); }, [ path, isDark ] ); }; Also tried commenting the Item Component. None of it removed the error. If it's the chance the one reading this question knows about WordPress, one detail I didn't mention yet (because I believe is fully a React problem) is that this React Component is a WP Block and the error happens specifically when I save it as a Pattern (Inserting the block in the Page's Editor, and Selecting 'Create pattern' from the block's options). If that's your case, here is a little more detail about what I tried in WordPress. I repeat, I don't believe this is a WP problem, but pure React error. But I am giving all the details I digged in and know so that you can help me better. Thanks!