metabase / metabase/metabase

Treat web console lifecycle warnings in Icon__IconWrapper component

Open
#16,076 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type:Tech Debt
Dominant language
Clojure
Stars
49.3k
Forks
6.8k
Avg merge
1d 13h
Merged PRs (30d)
653

Description

Please identify and solve issue generating console warnings.

## Steps to Reproduce

1. Go to http://localhost:3000
2. Open dev console
3. You should see a message like the one below printed twice, for `componentWillReceiveProps` and for `componentWillMount`.

```
react-dom.development.js:88 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles 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: Box, Flex, Icon, Icon__IconWrapper, Link, MetabaseIsSetup(Connect(UserIsAuthenticated(Component))), SearchBar__SearchInput, Styled(Clean.div), UndoListing__UndoList, UserIsAuthenticated(Component)
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the warnings at http://localhost:3000 and inspect the Icon__IconWrapper component named in the console output. Trace the component’s lifecycle usage and verify that the reported lifecycle warnings no longer appear in the development console.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.