I think you should have … before productListObj to spread the array produced by .map

[a, b.map()] will give you [a, [x1, x2]]
[a, …b.map()] will give you [a, x1, x2]

.concat works too though I prefer the spread syntax

In my case i need to have "[a, b.map()] will give you [a, [x1, x2]]" ^^. More generally, I would like to know why I have this error, it is not the first time, and I would like to avoid using something like : "setClient(true) if(!setClient) return null...."

the first image gives [a] but the second image can give [a, []] or [a, undefined] – your breadcrump looks like it can't take [a, []] or [a, undefined]

you are right, but even if i do something like that, (for getting out the undefined of the array, if there is one) i still have the error. The stranger part is the fact that the error disapear if i do something like that (second screen)

Boolean([]) is truthy so that doesn't filter out the [a, []] case

Do you know why the error does not happen whe i m using the second screen method ? I m just trying to understand more the behavior of Next js. Thx

Even if i do that : Same error.

i can't tell without the code of <Breadcrumbs />

Here is the file

If i remove the "map" on the render, it's working

As you can see, there is another component <BreadCrumbsLink>, but even if i replace all <li><BreacrumbsLink... with <div key={i}/>, the error still here : / Just for telling your that the content of BreadcrumbsLink does not matter.

Thank you ; )

Even if i change like this, it make the error. Removing it solve the issue.

so the cause is: your <Breadcrumb /> generates an invalid html tree, most likely because the returned html is not fully of the format

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

i don't have the time and effort needed to parse thru and analyse the file you sent so i can't say for sure where the bug is, so sorry, you have to debug yourself. printing the list array out and comparing them for two cases would be a good start.

Thanks for your help, when i have time i will try to solve it ; )

i figured out, it's from the localStorageHook

i use it here

`const productListObj: TProductComparatorLocalStorage | null =
    useLocalStorageListener('productComparatorList') 

``

This is the hook :

 import { useEffect, useState, useRef } from 'react'

const useLocalStorageListener = (key: string) => {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') return null
    return JSON.parse(localStorage.getItem(key) || 'null')
  })

  const storedValueRef = useRef(storedValue)

  useEffect(() => {
    if (typeof window === 'undefined') {
      return undefined
    }

    const updateValue = () => {
      const newValue = JSON.parse(localStorage.getItem(key) || 'null')
      if (JSON.stringify(newValue) !== JSON.stringify(storedValueRef.current)) {
        storedValueRef.current = newValue
        setStoredValue(newValue)
      }
    }

    const handleStorageChange = (event: StorageEvent | CustomEvent) => {
      if (
        (event instanceof StorageEvent && event.key === key) ||
        (event instanceof CustomEvent && event.detail.key === key)
      ) {
        updateValue()
      }
    }

    window.addEventListener('storage', handleStorageChange)
    window.addEventListener(
      'localStorageChange',
      handleStorageChange as EventListener
    )

    updateValue()

    return () => {
      window.removeEventListener('storage', handleStorageChange)
      window.removeEventListener(
        'localStorageChange',
        handleStorageChange as EventListener
      )
    }
  }, [key])

  return storedValue
}

export default useLocalStorageListener

`but this piss me off, because i call it on a client side component and when i m using setClient(true) useEffect... I have performances big issues...

It's ok now, i fixed it by uysing sotredValue in the useEffect. This fixed the hydratation error. Thx again.