Shiksha Journey from React v16.2.0 to v16.13

Author: Rizul Sharma

What’s new in React post v16.2.0?

Post v16.2.0 React comes with a lot of new features and improvements to stability. Facebook, the company behind React, has rewritten the entire core architecture making it able to support long-awaited features. In this post, we will explore the changes, and how we in Shiksha have migrated to the latest react version.

• New core architecture — support for async rendering
• Async act() for Testing
• Performance Measurements with <React.Profiler>
• Suspense for Code Splitting with React.lazy- React v16.6: The One with Suspense for Code Splitting
• React.memo — Bailed out the rendering of a functional component when props are same
• React Hooks — React v16.8: The One With Hooks — To learn more about hooks please follow this amazing hooks blog

a. Basic Hooks (useState, useEffect, useContext)

b. Additional Hooks (useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue)

• Error Boundaries — see below example.

• Deprecations — Renaming Unsafe Lifecycle Methods

a. componentWillMount → UNSAFE_componentWillMount

b. componentWillReceiveProps → UNSAFE_componentWillReceiveProps

c. componentWillUpdate → UNSAFE_componentWillUpdate

Note: React 16.9 does not contain breaking changes, and the old names continue to work. But you will now see a warning when using any of the above old names

For a complete list of deprecations in v16.9 visit this link

See React Official Changelog for Notable updates and bugfixes.

Now let’s put Hooks under the hood.

What Are Hooks?

Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components.

let’s see why you should use hooks…

1. Savage from wrapper hell
2. Seamless event attaching and detaching
3. Easy data fetching logic
3. Using stateful logic in functional component
4. Easy refactoring components, splitting into functions
5. Savage from passing props down to deeply nested child components
6. Seamless lazy loading and focusing on logic, check this blog for more on lazy loading
To learn more please follow this official link Using the Effect Hook

Note: Hooks at a Glance is a good place to start learning Hooks.

To see the complete list of hooks see this page

Now the showdown time — We in Shiksha take technology seriously and its impact on our user’s experience

Initially, it was like a cloudy judgment of what needs to be upgraded, how and most importantly why?

So we started to dig the internet upside down with the fact that we need to make our developer’s coding experience and users site experience seamless.

Finally, after reading about new React version enhancements and watching some Dan Abramov tech talks we were pretty convinced that yes this is something that we could leverage to make our large codebase more manageable and easy to optimize site experience by using Hooks and new improved server-side rendering logic.

Yes, there were some discussions and arguments about whether the current class-based component should be refactored to functional components with hooks. But as we say all the good things come from the excellent minds sitting around the round table. So we started this journey of refactoring and transforming our code into something more robust and powerful enough to handle most of the war crisis from an iron throne.

It seems exciting right! well yaa for us too…

We enjoyed this refactoring and transforming of our code using React v16.13 features and it was full of learning that we also created our own custom hooks to handle some complex processing in a simplistic manner like of the case when you need to perform some operations on scroll event, But if you use native scroll listener implementation than you ending with your function being called multiple time and it is a bottleneck for your site to perform other operations meanwhile. So now with our own custom hooks for that, the processing function is being called just at the required time and for the limited number of times, hence your main thread is available to handle other tasks simultaneously. Similarly, you can also use hooks to implement lazy load with infinite scrolling.

Now let’s see the list of changes we have done to upgrade our codebase. Here are the details of the changes during the upgrade

• Renaming Unsafe Lifecycle Methods componentWillMount, componentWillReceiveProps, componentWillUpdate to UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate.
• Using componentDidUpdate and static getDerivedStateFromProps instead of componentWillReceiveProps
• Remove the deprecating JavaScript: URLs (XSS safe).
• Use the React Profiler API/React Profiler from dev tools for performance measurements.
• Removing mixed imports syntax (module.exports(Node modules syntax) to import(ES modules syntax)) by using ES modules import and export syntax. or node modules module.exports with require syntax.
• Transform the presentational class-based component to functional component.
• Implemented React Hooks like useState, useEffect, useCallback to simplify and easy manageable functional components.
• Use the useCallback hook together with React Memo to avoid unnecessary re-renders of the child component when parent renders.
• Use the useEffect hook to simulate componentDidMount and componentWillUnmount to handle event subscriptions.

React version upgrade from v16.2.0 to v16.13 also requires upgrade in development packages and co-depencies packages.

As babel has upgraded to 7.x, therefore, there are some changes in plugins and presets that needed to be dealt with.

Webpack also has a breaking change due to a change in the export type of CleanWebpackPlugin from default export to named export and some change in usage too.

Import changes

const CleanWebpackPlugin = require("clean-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

Syntax changes in CleanWebpackPlugin

new CleanWebpackPlugin(["js"], { root: path.resolve(__dirname , "./public/"), verbose: true , beforeEmit : true})
new CleanWebpackPlugin({ verbose: true , beforeEmit : true })

Note: As with the new CleanWebpackPlugin version there is no need to specify the target folder to clean before build because it picks the webpack output.path as the target folder.

Now let’s answer — How profiling helped us in optimizing components rendering?

Let’s look at the real statistics of our components after upgrading to React v16.13. we have optimized the unnecessary rendering of child components when parent state changes and this is achieved using hooks like useCallback(to freeze the reference of passed method/object/any referenceable datatype) and React.memo

Advantage - The profiling tool helped us in pinned observation of each component rendering cycle during code review and development. Hence we were able to bail out the rendering of the child components when parent component state changes using React.memo in the functional component.

This profiling image(captured using React Profiler DevTools) is from before upgrade and shows the second render flame graph of our components as you can see the green area is the one which represents the child components renders even is the parent state changes. which ideally shouldn’t happen.

This profiling is the one after upgrade to the latest React v16.13 in Shiksha. As you can see now for the same 2nd rendering cycle when parent state changes the child components are being grayed out i.e they are not rendered in this cycle. Hence this is one of the benefits of upgrading.

Last but not least always remember there is always a scope for improvements and transformations so let’s keep digging the mountains of knowledge in this time of making our code to achieve great things. If you have any suggestions please go-ahead we are here to listen.

Till then may the force be with you!