Skip to content
This repository has been archived by the owner on Dec 16, 2021. It is now read-only.

Deep comparing props in shouldComponentUpdate (react-helmet usage) #391

Open
bassarisse opened this issue May 30, 2017 · 5 comments
Open

Comments

@bassarisse
Copy link

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
Copy link
Author

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
Copy link

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

@petermikitsh
Copy link

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

@petermikitsh
Copy link

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
Copy link

esbenam commented May 11, 2020

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)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants