React-instantsearch: Warnings about reacts renaming methods logged to the console

[anthony0030]

Describe the bug 🐛

Warnings logged to the console about react renaming componentWillMount and componentWillReceiveProps

Full Warning ⚠️

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: AlgoliaConfigure(UnknownComponent), AlgoliaCurrentRefinements(ClearButton), AlgoliaCurrentRefinements(ClearRefinementsWidget), AlgoliaHits(Hits), AlgoliaHits(SelectedHitMapInfo), AlgoliaNumericMenu(NumericMenuWidget), AlgoliaPagination(PaginationWidget), AlgoliaRange(CheckInDaySelector), AlgoliaRange(ConnectedPlusMinus), AlgoliaRefinementList(OccupancyFilter), AlgoliaRefinementList(RefinementListWidget), AlgoliaScrollTo(ScrollTo), AlgoliaSearchBox(Translatable(SearchBox)), AlgoliaSortBy(SortBy), AlgoliaStats(HitSpanWithType), AlgoliaStats(ShowButton), AlgoliaStats(Translatable(Stats)), AlgoliaToggle(ToggleRefinement), CreateInstantSearch, InstantSearch, PanelCallbackHandler, SearchBox

react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: AlgoliaConfigure(UnknownComponent), AlgoliaCurrentRefinements(ClearButton), AlgoliaCurrentRefinements(ClearRefinementsWidget), AlgoliaHits(Hits), AlgoliaHits(SelectedHitMapInfo), AlgoliaNumericMenu(NumericMenuWidget), AlgoliaPagination(PaginationWidget), AlgoliaRange(CheckInDaySelector), AlgoliaRange(ConnectedPlusMinus), AlgoliaRefinementList(OccupancyFilter), AlgoliaRefinementList(RefinementListWidget), AlgoliaScrollTo(ScrollTo), AlgoliaSearchBox(Translatable(SearchBox)), AlgoliaSortBy(SortBy), AlgoliaStats(HitSpanWithType), AlgoliaStats(ShowButton), AlgoliaStats(Translatable(Stats)), AlgoliaToggle(ToggleRefinement), PanelCallbackHandler

To Reproduce 🔍

Steps to reproduce the behavior:
1) Setup a simple Algolia demo with filters with the latest react version
2) See warning in the console

Live example:

https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/react-instantsearch

Expected behavior 💭
No errors or warnings logged to the console

Environment:

• OS: OSX 10.14.6 (18G95)
• Browser: Google Chrome
• Version: 76.0.3809.132 (Official Build) (64-bit)

Additional context

react: 16.9.0

[Haroenv]

Can you use the new beta version of React InstantSearch? It has fixed this issue and we will release it as a stable version soon :) You can find the migration guide here: https://github.com/algolia/react-instantsearch/blob/next/MIGRATION.md

[anthony0030]

Thank you for your reply.
I have been attempting to get it working the whole day.
I will try again tomorrow.

[Haroenv]

Can you let me know what issues you’re getting? We want to make sure this beta is ready for users, and it’s the first issue we are getting regarding things not working according to the guide. A reproduction codesandbox where you’re stuck would be ideal

[anthony0030]

My problem is if I visit the home page then a search page it works.
If I visit a search page directly it hangs I get the following error in my server console:

(node:65859) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'addAlgoliaAgent' of undefined
at new AlgoliaSearchHelper (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-instantsearch-core/node_modules/algoliasearch-helper/src/algoliasearch.helper.js:118:21)
at algoliasearchHelper (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-instantsearch-core/node_modules/algoliasearch-helper/index.js:40:10)
at createInstantSearchManager (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:88:49)
at new InstantSearch (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-instantsearch-core/dist/cjs/widgets/InstantSearch.js:97:134)
at c (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:325)
at Ua (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
at a.render (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:45:48)
at a.read (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:161)
at renderToString (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:55:83)
at findResultsState (/Users/anthonyveaudry/Sites/gothassos-react/node_modules/react-instantsearch-dom/dist/cjs/core/createInstantSearchServer.js:117:30)
(node:65859) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:65859) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

it is a complex project that includes:
i18next
razzle
Algolia

It has multiple search pages in multiple languages
and the languages are derived from the base name.
with English having no basename

I don't know if I am doing something wrong or if it is a bug.
The project I am working on is a private project.
I am trying to make a minimum version

[Haroenv]

Did you read the migration guide part on server side rendering? searchClient is now required as part of the second argument to findResultsState(App, { searchClient })

[anthony0030]

I put the search client and the index name as the second parameter.
I have read the guide and the migration steps so many times I have been trying for 2 days. Do you offer paid support. I am the only person working on this project and algolia is the most important part.
Thanks for being so responsive.
You are very interesting :)

[Haroenv]

@anthony0030 the best way to get help is to post the code somewhere where we can see it, preferably in a minimal reproduction

[malimccalla]

My console is getting litterered with these warnings at the moment. In case it helps these are the ones I'm getting

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: AlgoliaSearchBox(Translatable(SearchBox))

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: AlgoliaSearchBox(Translatable(SearchBox)), CreateInstantSearch, InstantSearch, Provider, SearchBox

react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: AlgoliaHits(Hits), Index

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: AlgoliaHits(Hits), Index

I will try upgrading to the beta version and see if they go away

[Haroenv]

Yes, those warnings are expected, and all fixed once you use the latest beta version @malimccalla

[anthony0030]

@Haroenv, I found the problem I was experiencing.
I had two versions of the wrapped app one for the server and one for the client.
The one for the server was not sending the new props correctly.
Thank you for your help and patience.

there is still one part of the puzzle I don't understand. were do I pass the search props for findResultsState to get the results that sould show withe the currently selected filters?

[Haroenv]

You can pass searchState to findResultsState, this is done in this example statically: https://codesandbox.io/s/github/algolia/react-instantsearch/tree/next/examples/server-side-rendering (check server.js)

[anthony0030]

Thank you I got it working just now.
Everything seems to be working without a problem.