firefox-devtools / firefox-devtools/profiler

Move to React 16.3 and implement new lifecycle methods

Open
#1,006 37 comments 0 reactions 3 assignees Assigned to @Segun-Ogundipe View on GitHub
code maintenance help wanted ready
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 5h
Merged PRs (30d)
30

Description

Since React 16.3 was out, componentWillReceiveProps is obsolete and has been renamed `UNSAFE_componentWillReceiveProps`. We should replace all its uses with recommended solutions.

Read more at [React's blog](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) and [documentation](https://reactjs.org/docs/react-component.html#the-component-lifecycle).

Here are some suggestions for each file. Note that they don't all have the same difficulty !

* [x] src/components/app/ZipFileViewer.js (claimed by @qmya)
Probably can be moved to `componentDidUpdate`
* [x] src/components/shared/Icon.js (claimed by @imabp)
Can be replaced by `componentDidUpdate`
* [x] src/components/shared/IdleSearchField.js (claimed by @qmya)
Probably replaced with a strategy [Fully uncontrolled component with a key](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key)
* [x] src/components/shared/TreeView.js (claimed by @mstange)
very possibly memoization
* [ ] src/components/shared/chart/Canvas.js
Strategy unclear. Maybe [Fully uncontrolled component with a key](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key).
* [ ] src/components/shared/chart/Viewport.js (claimed by @imabp)
Probably a mix. The parts that call `setSizeNextFrame` can easily be moved to `componentDidUpdate`. The part that compute an horizontalViewport could use a memoization strategy. The part that calls `viewportNeedsUpdate` may use `getDerivedStateFromProps`.
* [x] src/components/tooltip/Tooltip.js (claimed by @Segun-Ogundipe)
Maybe moving it to `componentDidUpdate` works, but this needs careful testing. Possibly a strategy [Fully uncontrolled component with a key](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) is better.

Please comment on this issue to claim a component, and I will add your name to it. Please only work on one at a time, and send in 1 PR for each code path. This will make it easy for multiple people to work on this. We can give some more information where needed.

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-36)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.