Deep comparing props in shouldComponentUpdate (react-helmet usage)

[bassarisse]

Hi there!

I'm trying to replace react with preact-compat in a project that uses react-helmet, but my current problem is with this code:

shouldComponentUpdate(nextProps) {
  return !deepEqual(this.props, nextProps);
}

The thing is that this next comparison is true when using preact-compat:

this.props.children === this.props.children[0]

So you can see that we'll enter an infinite loop and reach max call stack size. Am I missing something? Or doing something wrong?

I know preact-helmet exists. I'm just wondering if there's a valid solution for this so I can avoid changing the project code, since I'm using the new API offered by react-helmet version 5.x onwards.

Thanks!

[bassarisse]

I just noticed that preact-helmet does this:

    shouldComponentUpdate(nextProps) {
        const props = {...nextProps};
        if (!props.children || !props.children.length) {
            delete props.children;
        }
        return !deepEqual(this.props, props);
    }

Is this a good solution?

[tannerlinsley]

This is affecting React-Static users who opt for preact. What's the game plan here?

[petermikitsh]

Any updates on this? I've attempted adopting preact, and I'm also using the latest react-helmet, and I noticed this issue.

[petermikitsh]

For my use case, the simplest option was to rewrite my code to use the v4 interface. If you're using v5 of react-helmet, the old API is still supported, so you can continue to use v5.

Old code:

<Helmet>
  <title>My Profile</title>
</Helmet>

New code:

<Helmet title="My Profile"/>

Infinite call stacks are gone now. 👍

[esbenam]

react-fast-compare just added support for Preact in react-fast-compare@3.1.1. Maybe this could be resolved by upgrading the dependency in react-helmet (added a comment in the preact-compat issue)