Почему при построении компонентного дерева приложение зависает?

Question

[historydev]

Добрый вечер. Скажите пожалуйста почему это работает:

export default function TopBar() {
    return (
        <Router>

            <SelectNavigation />

        </Router>
    )
}

function SelectNavigation() {

    // if (window.innerWidth > 900) {
    //
         return (
            <nav className='nav-computer'>
                //<NavigationTop items={navigationItems}/> <===============
                <div className="logo">
                    <Link to='/'>
                        <div className="first-child">{logo.firstChild}</div>
                        <div className="last-child">{logo.lastChild}</div>
                    </Link>
                </div>
            </nav>
        )

    // } else if (window.innerWidth < 900 && window.innerWidth > 500) {
    //     return (
    //         <nav className='nav-tablet'>
    //             <Navigation items={navigationTablet}/>
    //             <div className="logo">
    //                 <Link to='/'>
    //                     <div className="first-child">{logo.firstChild}</div>
    //                     <div className="last-child">{logo.lastChild}</div>
    //                 </Link>
    //             </div>
    //         </nav>
    //     )
    // } else if (window.innerWidth < 500) {
    //
    //     return (
    //         <nav className='nav-mobile'>
    //             <Navigation items={navigationMobile}/>
    //             <div className="logo">
    //                 <Link to='/'>
    //                     <div className="first-child">{logo.firstChild}</div>
    //                     <div className="last-child">{logo.lastChild}</div>
    //                 </Link>
    //             </div>
    //         </nav>
    //     )
    // }
}

const NavigationTop = ({ items }) =>
    items instanceof Array && items.length
        ? <ul>
            {items.map(n => (
                <li key={n.id}>
                    <Link to='/'>{n.title}</Link>
                    <NavigationTop items={n.children} />
                </li>
            ))}
        </ul>
        : null;

а это нет:

export default function TopBar() {
    return (
        <Router>

            <SelectNavigation />

        </Router>
    )
}

function SelectNavigation() {

    // if (window.innerWidth > 900) {
    //
         return (
            <nav className='nav-computer'>
                <NavigationTop items={navigationItems}/>
                <div className="logo">
                    <Link to='/'>
                        <div className="first-child">{logo.firstChild}</div>
                        <div className="last-child">{logo.lastChild}</div>
                    </Link>
                </div>
            </nav>
        )

    // } else if (window.innerWidth < 900 && window.innerWidth > 500) {
    //     return (
    //         <nav className='nav-tablet'>
    //             <Navigation items={navigationTablet}/>
    //             <div className="logo">
    //                 <Link to='/'>
    //                     <div className="first-child">{logo.firstChild}</div>
    //                     <div className="last-child">{logo.lastChild}</div>
    //                 </Link>
    //             </div>
    //         </nav>
    //     )
    // } else if (window.innerWidth < 500) {
    //
    //     return (
    //         <nav className='nav-mobile'>
    //             <Navigation items={navigationMobile}/>
    //             <div className="logo">
    //                 <Link to='/'>
    //                     <div className="first-child">{logo.firstChild}</div>
    //                     <div className="last-child">{logo.lastChild}</div>
    //                 </Link>
    //             </div>
    //         </nav>
    //     )
    // }
}

const NavigationTop = ({ items }) =>
    items instanceof Array && items.length
        ? <ul>
            {items.map(n => (
                <li key={n.id}>
                    <Link to='/'>{n.title}</Link>
                    <NavigationTop items={n.children} />
                </li>
            ))}
        </ul>
        : null;

Спасибо.

Comments

[Klein Maximus]

Лучше на https://codesandbox.io/ опубликуйте код

[historydev]

Klein Maximus, добрый день. я уже разобрался, у меня была логическая ошибка в коде,я пытался порезать, резаный массив, зависало поэтому. Спасибо.