Terra-core: React 16 upgrade

Created on 24 Jul 2017  ยท  7Comments  ยท  Source: cerner/terra-core

Issue Description

When react 16 comes out, we'll want to enable compatibility with react 16.

Issue Type

  • [ ] New Feature
  • [x] Enhancement
  • [ ] Bug
  • [ ] Other

Expected Behavior

Terra components are compatible with React 16

Current Behavior

N/A

Most helpful comment

Third Party Dependencies Requiring React:

| Good To Go | Dependency | Current Specified Version | React 16 Supported Version | Watch Issue
| ----|----|----|----|-----|
| โœ… | enzyme | ^2.8.2 | v^3.x | https://github.com/cerner/terra-core/issues/871 |
| โœ… | react-intl | v^2.3.0 | v2.4.0 | Need to bump to v2.4.0 |
| โœ… | react-datepicker | v^0.46.0 | v^0.61.0 | Need to bump to v0.61.0 CLOSED: https://github.com/Hacker0x01/react-datepicker/issues/972 |
| โœ… | react-redux | v^5.0.4 | v4.4.7 | N/A |
| โœ… | focus-trap-react | v^3.0.2 | v3.0.4 | Need to bump to v3.0.4....CLOSED: https://github.com/davidtheclark/focus-trap-react/issues/15 |
| โœ… | react-router | v^3.0.5 | v3.2.0 | Need to bump to v3.2.0 |
| โœ… | react-transition-group | v^2.2.0 | v2.2.1 | Need to bump to v2.2.1....CLOSED: https://github.com/reactjs/react-transition-group/pull/198 |
| โœ… | react-animate-height | v^0.9.5 | v0.10.4 | Need to bump to v0.10.4....CLOSED: https://github.com/Stanko/react-animate-height/issues/28 |

All 7 comments

The React Team's progress in releasing v16 https://github.com/facebook/react/issues/10294

Some POI With React 16:

>JS Environment Requirements

  1. Suggests to include a global polyfill for older browser support
    > React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg
  2. Uses requestAnimationFrame, even in test enviornments

>Offers Error Handling

>Lifecycle and Scheduling Changes

  1. Calling setState with null no longer triggers an update and calling setState directly in render always causes an update.
  2. Changing ref to a component will detach/change after render
    > Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
  3. componentDidUpdate lifecycle no longer receives prevContext param. (See https://github.com/facebook/react/pull/8631)

    >Random Side Note

Hydrating a server rendered container now has an explicit API. Use ReactDOM.hydrate instead of ReactDOM.render if you're reviving server rendered HTML. Keep using ReactDOM.render if you're just doing client-side rendering.

Here is the initial assessment of upgrading terra-core to React 16 using React v16.0.0-rc:
https://docs.google.com/document/d/1wmJGGm7vE66V4UtAMTkJlzrjfc3TeTc4mjiY09nk13g/edit?usp=sharing

Third Party Dependencies Requiring React:

| Good To Go | Dependency | Current Specified Version | React 16 Supported Version | Watch Issue
| ----|----|----|----|-----|
| โœ… | enzyme | ^2.8.2 | v^3.x | https://github.com/cerner/terra-core/issues/871 |
| โœ… | react-intl | v^2.3.0 | v2.4.0 | Need to bump to v2.4.0 |
| โœ… | react-datepicker | v^0.46.0 | v^0.61.0 | Need to bump to v0.61.0 CLOSED: https://github.com/Hacker0x01/react-datepicker/issues/972 |
| โœ… | react-redux | v^5.0.4 | v4.4.7 | N/A |
| โœ… | focus-trap-react | v^3.0.2 | v3.0.4 | Need to bump to v3.0.4....CLOSED: https://github.com/davidtheclark/focus-trap-react/issues/15 |
| โœ… | react-router | v^3.0.5 | v3.2.0 | Need to bump to v3.2.0 |
| โœ… | react-transition-group | v^2.2.0 | v2.2.1 | Need to bump to v2.2.1....CLOSED: https://github.com/reactjs/react-transition-group/pull/198 |
| โœ… | react-animate-height | v^0.9.5 | v0.10.4 | Need to bump to v0.10.4....CLOSED: https://github.com/Stanko/react-animate-height/issues/28 |

Unblocked by #871. However will need to implement enzyme-adapter-react-16.

Resolved in #1194

Was this page helpful?
0 / 5 - 0 ratings