profile
viewpoint

Ask questionsWarnings about reacts renaming methods logged to the console

<!-- Thanks for participating in this project! We will try to answer as soon as possible 🙏 -->

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

algolia/react-instantsearch

Answer questions anthony0030

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

useful!

Related questions

No questions were found.
Github User Rank List