Upgrading React to v16.8.6

[MikeRatcliffe]

Description

Over the last few days I have taken the time to look into a React upgrade from v16.4.1 to v16.8.6.

If we upgrade before the 17 release we should be in a better place to upgrade to 17 when it comes... of course they aim for no breaking changes but history has shown us that this isn't always possible.

What do y'all think? The upgrade should be completed within a few hours because I don't believe we will need to change anything in any of our components.

React 16.6 introduced React.lazy() for lazy loading components and React.Suspense() that can be used to temporarily display something until a component renders (skeleton screens). They could make a real impact on our real and perceived performance... especially when used with React DevTool's new Profiler tab (see item 2 below).

Of course there are more goodies

1. React.memo() can be used to wrap functional components so that they act as PureComponents.
2. React DevTools now has a profiler tab: See https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/.

3. React hooks for functional components. There is also eslint-plugin-react-hooks to ensure they are used properly:

   • React.useState() - Instead of just letting you use state inside functional components useState() allows you to have multiple states:

   function example() {
   const [age, setAge] = useState(42);
   const [features, setFeatures] = useState({
     wrinkles: 110,
     ears: "large",
   });
   ...
   setAge(43);
   setFeatures({
     wrinkles: 510,
     ears: "extra-large",
   });
   ...
   return (
     <div>
       DOM stuff
     </div>
   )
   }

   • useEffect() The equivalent of componentDidMount, componentDidUpdate, and componentWillUnmount depending on how you use it.
   • useContext() allows a functional component to subscribe to React context.
   • useReducer() lets you manage local state of complex components with a reducer.
   • There is also useCallback(), useMemo(), useRef(), useImperativeHandle(), useLayoutEffect() and useDebugValue() but you get the gist.

Unsurprisingly there are a huge list of bug fixes and performance improvements

We will get 2 new lifecycle methods:

• getDerivedStateFromProps()
• getSnapshotBeforeUpdate()

Deprecated / renamed

• UNSAFE_componentWillMount - Use the constructor() instead
• UNSAFE_componentWillReceiveProps - Use static getDerivedStateFromProps() instead
• UNSAFE_componentWillUpdate - Use getDerivedStateFromProps()

The deprecated methods go away in 17.0 (UNSAFE_ methods stay) so we should add the UNSAFE_ prefix to those we currently use Bug 1508688.

React: What changed between 16.4.1 and 16.8.6?

• Add a warning if React.forwardRef() render function doesn't take exactly two arguments
• Improve the error message when passing an element to createElement() by mistake
• Don't call profiler onRender() until after mutations
• Improve the warning when React.forwardRef() receives an unexpected number of arguments.
• Add React.memo() as an alternative to PureComponent for functions.
• Add React.lazy() for code splitting components.
• React.StrictMode now warns about legacy context API.
• React.StrictMode now warns about findDOMNode().
• Rename unstable_AsyncMode to unstable_ConcurrentMode.
• Rename unstable_Placeholder to Suspense, and delayMs to maxDuration.
• Add Hooks — a way to use state and other React features without writing a class.
• Improve the useReducer() Hook lazy initialization API.

React DOM

• Add support for React DevTools Profiler
• Add react-dom/profiling entry point alias for profiling in production
• Add onAuxClick event for browsers that support it
• Add movementX and movementY fields to mouse events
• Add tangentialPressure() and twist fields to pointer events
• Minimally support iframes
• Support passing booleans to the focusable SVG attribute
• Ignore <noscript> on the client when hydrating
• Fix gridArea to be treated as a unitless CSS property
• Fix incorrect data in compositionend event when typing Korean on IE11
• Fix a crash when using dynamic children in the <option> tag
• Fix the checked attribute not getting initially set on the input
• Fix hydration of dangerouslySetInnerHTML() when __html is not a string
• Fix a warning about missing controlled onChange to fire on falsy values too
• Fix submit and reset buttons getting an empty label
• Fix the onSelect event not being triggered after drag and drop
• Fix the onClick event not working inside a portal on iOS
• Fix a performance issue when thousands of roots are re-rendered
• Fix a performance regression that also caused onChange to not fire in some cases
• Handle errors in more edge cases gracefully
• Don't use proxies for synthetic events in development
• Warn when "false" or "true" is the value of a boolean DOM prop
• Warn when this.state is initialized to props
• Don't compare style on hydration in IE due to noisy false positives
• Include StrictMode in the component stack
• Don't overwrite window.event in IE
• Improve component stack for the folder/index.js naming convention
• Improve a warning when using getDerivedStateFromProps() without initialized state
• Improve a warning about invalid textarea usage
• Treat invalid Symbol and function values more consistently
• Allow Electron <webview> tag without warnings
• Don't show the uncaught error addendum if e.preventDefault() was called
• Warn about rendering Generators
• Remove irrelevant suggestion of a legacy method from a warning
• Remove unstable_deferredUpdates in favor of unstable_scheduleWork from schedule
• Fix unstable asynchronous mode from doing unnecessary work when an update takes too long
• Fix a regression in unstable exports used by React Native Web.
• Fix a crash when component defines a method called isReactComponent().
• Fix a crash in development mode in IE9 when printing a warning.
• Provide a better error message when running react-dom/profiling with schedule/tracking.
• If a ForwardRef component defines a displayName, use it in warnings.
• Fixed a recent <iframe> regression
• Fix updateWrapper so that <textarea>s no longer re-render when data is unchanged
• Add contextType() as a more ergonomic way to subscribe to context from a class.
• Add getDerivedStateFromError() lifecycle method for catching errors in a future asynchronous server-side renderer.
• Warn when <Context> is used instead of <Context.Consumer>.
• Fix gray overlay on iOS Safari.
• Fix a bug caused by overwriting window.event in development.
• Fallback should not remount every time a promise resolves.
• Fix bug where Suspense keeps showing fallback even after everything finishes loading.
• Fix a crash when Suspense finishes loading in IE11.
• Fix unresolved default props in lifecycle methods of a lazy component.
• Fix bug when recovering from an error thrown during complete phase.
• Fix bugs in Suspense and lazy.
• Fix highlighting of React.memo updates in React DevTools.
• Fix interaction of Suspense with the React Profiler.
• Fix a false positive warning when using Suspense.
• Fix performance of React.lazy for large numbers of lazily-loaded components.
• Clear fields on unmount to avoid memory leaks.
• Fix bug with SSR and context when mixing react-dom/server@16.6 and react@<16.6.
• Fix a performance regression in profiling mode.
• Bail out of rendering on identical values for useState and useReducer Hooks.
• Use Object.is algorithm for comparing useState and useReducer values.
• Don’t compare the first argument passed to useEffect/useMemo/useCallback Hooks.
• Support synchronous thenables passed to React.lazy().
• Render components with Hooks twice in Strict Mode
• Warn about mismatching Hook order in development.
• Effect clean-up functions must return either undefined or a function. All other values, including null, are not allowed.
• Fix ReactDOM.render being ignored inside useEffect.
• Fix a crash when unmounting empty portals.
• Fix useImperativeHandle to work correctly when no deps are specified.
• Fix crossOrigin attribute to work in SVG image elements.
• Fix a false positive warning when using Suspense with Hooks.
• Fix a bug that caused inputs to behave incorrectly in UMD builds.
• Fix a bug that caused render phase updates to be discarded.
• Fix a bug where DevTools caused a runtime error when inspecting a component that used a useContext hook.
• Don't set the first option as selected in select tag with size attribute.
• Improve the useEffect(async () => ...) warning message.
• Improve the error message sometimes caused by duplicate React.
• Fix an incorrect bailout in useReducer().
• Fix iframe warnings in Safari DevTools.
• Warn if contextType is set to Context.Consumer instead of Context.
• Warn if contextType is set to invalid values.

React DOM Server

• Fix a crash in the server renderer when an attribute is called hasOwnProperty. This fix is only available in react-dom@16.4.2.
• Fix crash with nullish children when using dangerouslySetInnerHtml in a selected <option>
• Fix crash when setTimeout is missing
• Fix a potential XSS vulnerability when the attacker controls an attribute name
• Add support for React.memo().
• Add support for contextType.
• Fix incorrect sharing of context state between renderToNodeStream() calls.
• Add a warning about incorrect usage of the context API.
• Unwind the context stack when a stream is destroyed without completing, to prevent incorrect values during a subsequent render.
• Improve the useLayoutEffect warning message when server rendering.

React Test Renderer and Test Utils

• Fix this in a functional component for shallow renderer to be undefined
• Deprecate a Jest-specific ReactTestUtils.mockComponent() helper
• Warn about ReactDOM.createPortal usage within the test renderer
• Improve a confusing error message

React Shallow Renderer

• Fix setState in shallow renderer to work with Hooks.
• Fix shallow renderer to support React.memo.
• Fix shallow renderer to support Hooks inside forwardRef.

React ART

• Add support for DevTools

Scheduler (Experimental)

• New package for cooperatively scheduling work in a browser environment. It's used by React internally, but its public API is not finalized yet.
• Add a separate profiling entry point at schedule/tracking-profiling.
• Renaming "tracking" API to "tracing"
• Add UMD production+profiling entry points
• Refactored schedule to remove some React-isms and improve performance for when deferred updates time out
• Rename the package to scheduler.
• Support priority levels, continuations, and wrapped callbacks.
• Improve the fallback mechanism in non-DOM environments.
• Schedule requestAnimationFrame earlier.
• Fix the DOM detection to be more thorough.
• Fix bugs with interaction tracing.
• Add the envify transform to the package.
• Switch from deadline object to shouldYield API.
• Post to MessageChannel instead of window.
• Reduce serialization overhead.
• Fix fallback to setTimeout in testing environments.
• Add methods for debugging.

React Test Renderer and Test Utils

• Support Hooks in the shallow renderer.
• Fix wrong state in shouldComponentUpdate in the presence of getDerivedStateFromProps for Shallow Renderer.
• Add ReactTestRenderer.act() and ReactTestUtils.act() for batching updates so that tests more closely match real behavior.
• Fix a crash in Node environment.
• Fix a crash when used together with an older version of React.
• Include component stack into the act() warning.

ESLint Plugin: React Hooks

• Initial release.
• Fix reporting after encountering a loop.
• Don't consider throwing to be a rule violation.
• Add a new recommended exhaustive-deps rule.

[juliandescottes]

Looks like there are no breaking change with this upgrade. If try and DAMP are happy with this (and if you have time to work on it :) ), it sounds like a good thing to do.

[MikeRatcliffe]

This is now implemented, closing.