React-helmet: React-helmet crashes with the hook useEffect

[raRaRa]

Hi.

I was just trying out hooks for the first time and I noticed that when I use Helmet on a component that has the hook useEffect, it crashes with maximum call stack size exceeded error:

Uncaught RangeError: Maximum call stack size exceeded
    at isUndefinedOrNull (index.js:27)
    at objEquiv (index.js:44)
    at push../node_modules/deep-equal/index.js.module.exports (index.js:23)
    at objEquiv (index.js:96)
    at push../node_modules/deep-equal/index.js.module.exports (index.js:23)
    at objEquiv (index.js:96)
    at push../node_modules/deep-equal/index.js.module.exports (index.js:23)
    ...

I fixed the issue by using props on the Helmet component, instead of using children.

Before:

<Helmet>
    <title>test</title>
</Helmet>

After:

<Helmet
    title="test"
/>

Any ideas why this is happening? Seems to be related to #373

Thanks.

[alaycock]

Have you tried this on the 6.0.0-beta release? I would suspect it's related to #373 instead of hooks.

[raRaRa]

Have you tried this on the 6.0.0-beta release? I would suspect it's related to #373 instead of hooks.

No not yet. I just ended up using the title prop.

[gianpaj]

the issue seems to be solved with v6.0.0-beta. tested with react 16.8

[sgnl]

In fact, I am experiencing this with just using useState in my component (useEffect is not present)

Changing my title from a children component to a title prop fixed it without having to upgrade my Helmet package.

[emilbryggare]

This happened to me today. Solved it by upgrading to v6.0.0-beta.

[ivanbtrujillo]

HI guys, I'm facing the same issue with useEffect and react-helmet. I've updated to v6.0.0-beta but is still failing.

[luskin]

Same issue here, upgraded to 6.0.0-beta but using a hook with Helmet fails with a Maximum call stack size exceeded

I attempted to use @sgnl approach to using title as a prop but this did not fix it either. Here is my simple example for reproduction:

head.js

import React from 'react'
import Helmet from 'react-helmet'
import useRouterLocation from 'hooks/useRouterLocation'

export const Head = ({ title = 'Test' }) => {
  const location = useRouterLocation()
  return (
    <Helmet>
      <title>{title}</title>
    </Helmet>
  )
}
export default Head

useRouterLocation.js

import { useEffect, useState } from 'react'
import history from 'router/history'

export const useRouterLocation = () => {
  const [location, setLocation] = useState(history.location)
  useEffect(() => {
    const unsubscribeFromLocationUpdates = history.listen(location => {
      setLocation(location)
    })
    return () => unsubscribeFromLocationUpdates()
  })
  return location
}
export default useRouterLocation

[PabloRosales]

I had to use defaultTitle and description props to avoid the problem.

[MoOx]

Fixed in 6.0.0-beta 👌

[ssorallen]

Upgrading from v5.2.0 to v5.2.1 solved this issue for me.

yarn upgrade -L react-helmet

That release switched from the deep-equal package to react-fast-compare as well.

[codeaid]

Neither 5.2.1 nor 6.0.0-beta fixed it for me. Still getting the following error:

Uncaught RangeError: Maximum call stack size exceeded
    at Array.sort (native)
    at objEquiv (http://localhost:3001/static/js/6.chunk.js:92895:6)
    at push../node_modules/deep-equal/index.js.module.exports (http://localhost:3001/static/js/6.chunk.js:92833:12)
    at objEquiv (http://localhost:3001/static/js/6.chunk.js:92906:10)
    at push../node_modules/deep-equal/index.js.module.exports (http://localhost:3001/static/js/6.chunk.js:92833:12)
    [..]
    at objEquiv (http://localhost:3001/static/js/6.chunk.js:92906:10)
    at push../node_modules/deep-equal/index.js.module.exports (http://localhost:3001/static/js/6.chunk.js:92833:12)
    at objEquiv (http://localhost:3001/static/js/6.chunk.js:92906:10)
static/js/6.chunk.js:222713 The above error occurred in the <HelmetWrapper> component:
    in HelmetWrapper (at MyWindow.tsx:139)
    in AppWindow (created by ConnectFunction)
    in ConnectFunction (at MyWindow.tsx:138)
    in MyWindow (created by ConnectFunction)
    in ConnectFunction (at Route.tsx:28)
    in Route (at Route.tsx:37)
    in Route (at routes.tsx:18)
    in Switch (at App.tsx:20)
    in Suspense (at App.tsx:18)
    in Router (at Router.tsx:16)
    in Router (created by ConnectFunction)
    in ConnectFunction (at App.tsx:17)
    in App (at src/index.tsx:38)
    in ThemeProvider (at src/index.tsx:37)
    in Provider (at src/index.tsx:36)

Edit:
Switching to <Helmet title={...} /> fixes it for anyone else coming to this issue in the future.

[OliverJAsh]

Upgrading from v5.2.0 to v5.2.1 solved this issue for me.

A tag/release for 5.2.1 isn't on GitHub, but the version is on npm. What's the difference between 5.2.0 and 5.2.1?

5.2.1 did not fix the issue for me. 6.0.0 has been in beta since January IIUC—any chance we can push a fix for this to stable?

[alaycock]

@OliverJAsh version 5.2.1 wasn't tagged, but you can see the diff at the link below, assuming the commit is the same thing that was published on NPM. The only real difference appears to be replacing deepEqual with isEqual.

https://github.com/nfl/react-helmet/compare/4d28f7045bc75724b904d2b63a06b7c0a81fe387...release/5.2.0