Warning: componentWillMount has been renamed — SideEffect(DocumentTitle)

[a-x-]

react 16.9.0+ compat

[flyingcrp]

got the same warning.

       "react": "^16.9.0",
        "react-document-title": "^2.0.3",
        "react-dom": "^16.9.0",
        "react-loadable": "^5.5.0",
        "react-router-dom": "^5.0.1",

```

[a-x-]

We had not merged the pull request, because of problems in react-document-title

there is not lite way to replace componentWillMount → componentDidMount here.

more info: gaearon/react-side-effect#40 (comment)

[kud]

Interested by this too.

[mmakarin]

Just use hooks.

function useDocumentTitle(title) {
  const originalTitle = document.title;

  useEffect(
    () => {
      document.title = title;

      return () => {
        document.title = originalTitle;
      };
    },
    [title, originalTitle]
  );
}

[flyingcrp]

need upgrade this package?

[Hypnosphi]

@mmakarin this will not actually reset the title, because originalTitle updates on the next render. Something like this should work though:

function useDocumentTitle(title) {
  useEffect(
    () => {
      const originalTitle = document.title;
      document.title = title;

      return () => {
        document.title = originalTitle;
      };
    },
    [title]
  );
}

[erindepew]

So your solution works @Hypnosphi solution is on my branch (ignore the tests, they're broken for the reason following) https://github.com/erindepew/react-document-title/tree/convert-to-hooks the only problem is that it seems to also require a change for withSideEffect https://github.com/gaearon/react-side-effect in order to get the .rewind() and .peek(), and I'm not sure there's a way to do that without componentWillMount. Thoughts?

[SeanRoberts]

One issue with the hooks approach is that nested components don't take precedence over their parents: https://codesandbox.io/s/interesting-bartik-stwys (see useDocumentTitle.ts and useDocumentTitle.test.tsx)

Given that children are mounted before parents I'm not really sure what the best approach to solving this would be. Especially tricky when you consider sibling components as well and determining which should take precedence

Edit: I think I might just be re-stating what @erindepew said above

[erindepew]

Great point, completely forgot about that as well. So seems like refactoring to hooks isn't really an option for this component.

[SeanRoberts]

Yeah I think essentially the heavy lifting here is handled by react-side-effect, and react-side-effect depends on componentWillMount. The issue for that is here: gaearon/react-side-effect#54

Dan stated in that issue that react-side-effect doesn't really make sense to him anymore and that a more modern approach might be to use context. It looks like react-helmet-async is doing just that, so maybe that's the way to go.

[machineghost]

What's needed to make this happen? Does a solution need to be picked by the maintainers (it seems like context is the way to go?) Is a PR needed?

The last comment here is from 2019; how can we make this happen in 2020?

[RomanKontsevoi]

Please, fix this issue