ic_agile_128ic_business_128ic_agile_white_128ic_banknote_smile_128ic_business_128ic_business_128ic_checkmark_128ic_client_team_manager_128ic_code_file_128ic_code_files_128ic_corporate_cloud_platforms_128ic_crossplatform_apps_128ic_dedicated_team_128ic_developer_128ic_development_team_128ic_enterprise_128ic_faster_timeframe_128ic_fixed_price_128ic_graph_down_128ic_graph_down_128ic_hourly_128ic_hourly_white_128ic_information_finder_128ic_junior_developer_128ic_managed_team_128ic_message_128ic_mobile_app_startups_128ic_mobile_development_128ic_mobile_development_up_128ic_mobile_devices_128ic_multiplatform_128ic_multiplatform_white_128ic_pricetag_128ic_project_checklist_128ic_project_management_128ic_project_management_team_128ic_research_and_development_team_128ic_scalable_team_128ic_senior_developer_128ic_smaller_codebase_128ic_smaller_price_128ic_startup_128ic_team_manager_128ic_three_times_faster_128K&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxArrow_Dropdownic_001_google+_16ic_002_xing_16Group 2ic_003_facebook_16ic_004_linkedIn_16Groupic_005_message_16ic_006_upload_16ic_007_remove_16ic_008_email_16ic_009_attachment_16ic_010_file_16ic_011_name_16ic_012_arrow_left_16ic_013_arrow_right_16ic_014_arrow_down_16ic_015_arrow_up_16ic_016_dropdown_arrow_down_16ic_016_dropdown_arrow_leftic_016_dropdown_arrow_rightic_017_K&C_dropdown_arrow_up_16ic_018_language_16ic_019_Quote_16ic_020_+_16ic_021_=_16ic_022_phone_16ic_023_twitter_16ic_024_position_16ic_025_company_16ic_026_search_16ic_027_mobile_16ic_028_fax_16ic_029_location_16ic_030_enlarge_16ic_031_downscale_16ic_032_contactic_download_normal_16pxic_033_skype_16ic_006_download_16 copySearchGroup 26Rss_font_awesomeConsul_VerticalLogo_FullColorPacker_VerticalLogo_FullColorTerraform_VerticalLogo_FullColorVault_VerticalLogo_FullColorethereum_black_64ic_Interest_based_64ic_acrivate_card_64ic_api_client_64ic_application_architecture_64ic_application_architecture_ white_64ic_application_development_user_64ic_application_development_user_64ic_arrow_down_64ic_automated_backups_64ic_automated_infrastructure_provisioning_64ic_automated_infrastructure_provisioning_white_64ic_automated_storage_64ic_automated_storage_64ic_automation_64ic_microservice_architecture_64ic_avaliability_across_the_world_64ic_avaliability_across_the_world_white_64ic_blockchain_64ic_blockchain_white_64ic_brackets_64ic_brackets_64ic_build_64ic_build_64ic_build_64ic_business_64ic_business_partnership_64ic_business_partnership_white_64ic_business_64ic_calculator_64ic_calendar_64ic_car_rent_64ic_card_renewal_64ic_chat_64ic_chat_bubbles_64ic_chat_bubbles_64ic_chat_white_64ic_checklist_64ic_checkmark_64ic_blockchain_64ic_smart_development_64ic_blockchain_consulting_64ic_checkmark_white_64ic_clock_64ic_clock_white_64ic_cloud_media_64ic_cloud_solutionsic_cloud_solutions_whiteic_cluster_64ic_cluster_white_64ic_code_base_optimization_64ic_coding_64ic_coding_white_64ic_commenting_widget_64ic_commenting_widget_64ic_containers_64ic_containers_white_64ic_continious_64ic_continious_delivery_64ic_continious_delivery_white_64ic_continious_release_64ic_continious_release_white_64ic_continious_white_64ic_cost_saving_64ic_cost_saving_white_64ic_cpu_load_64ic_credit_card_64ic_crossplatform_app_development_64ic_crossplatform_app_development_white_64ic_custom_crm_64ic_custom_crm_64ic_independence_consulring_64ic_database_calls_64ic_database_calls_white_64ic_dedicated_teams_64ic_dedicated_teams_64ic_desktop_application_user_64ic_desktop_application_user_64ic_desktop_code_64ic_desktop_code_white_64ic_developer_64ic_developer_white_64ic_development_64ic_devops_64ic_devops_64ic_documents_64ic_documents_graph_64ic_documents_graph_white_64ic_documents_white_64ic_download_presentation_64ic_education_64ic_email_open_64ic_email_open_white_64ic_environment_healthcheckethereum_white_64ic_euro_64ic_euro_white_64ic_failure_solved_64ic_gdpr_64ic_globe_outlines_64ic_good_quality_64ic_high_load_websites_64ic_high_load_websites_white_64ic_hotel_booking_64ic_inability_64ic_inability_white_64ic_increase_64ic_increase_white_64ic_increasing_team_64ic_independence_64ic_integration_64ic_it_outsourcing_64ic_it_outsourcing_64ic_knowledge_sharing_64ic_mobile_devices_64ic_laptop_user_64ic_laptop_user_white_64ic_launch_64ic_launch_white_64ic_learning_64ic_learning_two_white_64ic_lighthouse_64ic_link_64ic_load_balancer_64ic_load_balancer_64ic_load_card_64ic_lock_64ic_lock_white_64ic_low_cost_64ic_low_load_websites_64ic_maintenance_tools_64ic_maintenance_tools_white_64ic_media_player_64ic_media_player_white_64ic_messaging_platforms_64ic_microservice_architecture_64ic_microservices_64ic_microservices_64ic_mobile_app_64ic_mobile_app_64ic_mobile_content_64ic_mobile_development_64ic_mobile_development_white_64ic_mobile_devices_64ic_mobile_devices_white_64ic_mobile_payments_64ic_mobile_social_media_applications_64ic_mobile_workflows_64ic_money_transfers_64ic_multimedia_sharing_64ic_multimedia_sharing_white_64ic_my_garage_64ic_no_access_64ic_no_access_white_64ic_no_oldschool_64ic_online_marketplaces_64ic_online_marketplaces_white_64ic_online_trading_64ic_online_trading_64ic_pair_device_64ic_parallels_64ic_parallels_white_64ic_passcode_64ic_payment_systems_64ic_performance_64ic_performance_issues_64ic_performance_issues_white_64ic_performance_white_64ic_plane_64ic_plane_white_64ic_plus_64ic_plus_64ic_pricetags_64ic_pricetags_64ic_product_64ic_product_search_64ic_product_white_64ic_productivity_tools_64ic_productivity_tools_64ic_project_delivery_64ic_project_delivery_white_64ic_project_management_64ic_project_management_collaboration_64ic_project_management_team_64ic_project_management_team_white_64ic_project_risks_reduced_64ic_quality_mark_64ic_quality_mark_64ic_quality_mark_white_64ic_question_64ic_react_native_64ic_response_time_64ic_response_time_white_64ic_rest_api_64ic_retail_64ic_transparency_consulting_64ic_scale_up_64ic_scale_up_white_64ic_security_64ic_self_healing_64ic_self_healing_64 copyic_send_money_64ic_server_64ic_server_white_64ic_shopping_64ic_shopping_white_64ic_sleep_mode_64ic_small_is_beautiful_64ic_smaller_price_64ic_social_benefits_64ic_social_connections_64ic_socket_64Group 20ic_spare_parts_for_cars_64ic_spare_parts_for_cars_white_64ic_speedometer_64ic_performance_consulting_64ic_speedometer_white_64ic_startup_64ic_startup_white _64ic_target_64ic_team_64ic_testing_64ic_testing_checklist_64ic_testing_checklist_64ic_testing_white_64ic_three_times_faster_64ic_touch_64ic_touch_id_64ic_touch_white_64ic_transparency_64ic_ui_design_desktop_64ic_ui_design_mobile_64ic_ui_design_mobile_white_64ic_umbrella_64ic_umbrella_64ic_umbrella_white_64ic_up_and_down_scaling_64ic_up_and_down_scaling_64ic_users_64ic_users_white_64ic_ux_design_64ic_ux_design_desktop_64ic_ux_design_64ic_ux_design_white_64ic_vehicle_64ic_web_based_search_64ic_web_based_search_white_64ic_web_browser_code_64ic_web_browser_developer_mode_64ic_web_browser_user_64ic_web_development_64ic_web_development_white_64ic_web_portals_64ic_web_portals_64ic_web_user_64ic_web_user_white64ic_workflow_64ic_workflow_steps_64ic_workflow_steps_white_64ic_workflow_white_64ic_working_environment_64solidity_blackGroup 19

What's New in React 16.3

React 16.3 Context API

The most anticipated feature of the release was the introduction of a new context API that should be more efficient and support both deep updates and static type checking. It is widely known fact that React has already offered multiple experimental APIs before, all of which were marked as "unofficial" and not recommended to use. So, after multiple experiments and debuggings, it looks like React has finally managed to represent the updated API that will simplify state management without using Redux / MobX.


React store built on top of the new context API


Here is an example of a basic implementation.


https://github.com/didierfranc/react-waterfall

import { initStore } from 'react-waterfall'

const store = {
  initialState: { count: 0 },
  actions: {
    increment: ({ count }) => ({ count: count + 1 }),
  },
}

const { Provider, connect } = initStore(store)

let Count = ({ count, actions }) => (
  <>
    {count}
    <button onClick={actions.increment}>+</button>
  </>
)

Count = connect(state => ({ count: state.count }))(Count)

const App = () => (
  <Provider>
    <Count />
  </Provider>
)


React.createContext(“Hello”)

When Context should be used?

-instead of Redux in simple use cases

-if you want to reduce prop drillin when passing props several times down to the root children

-to control theming in your app

-to control the flow of data

-for localization


Context API versus Redux

Despite the React's new Context API there are still cases when you may need to use Redux. So, when do we need to use it and when to avoid?


Rule of thumb - “if you don't know why you may need to use a Redux - DO NOT use it”


Let's take a closer look at the avantages that the new API offers, as well as disadvantages that can be overcome with Redux.


PROS:

-The new Context is easier to implement

-You don't need an additional library

-There's less code, it's better understandable


CONS:

Limited functionality. It doesn't offer:

-Great set of development tools as in Redux

-No ‘undo’ (time traveling)

-Less scalable

-Not as many of ready-to-use tools as Redux can offer (ecosystem)


To summarize the above said, we'd say that the new Context app could be used for data flow in smaller apps, while in some cases you should stick to previous versions that will keep working for all React 16.x versions. However, with React 17 the old API will be deprecated, so don't forget to migrate on time.

New Ref APIs

Previously, React allowed to manage refs in two different ways: through legacy string ref API and the callback API. Legacy strings had multiple significant downsides, like problems with async, render props or static typing, which is why React recommended to use callbacks.

In new version, additionally to callback refs, which will continue to be supported, React eliminated all the downsides and introduced new createRef API, which can be an ergonomic alternative to callback refs.

class UserForm extends Component {
   constructor(props) {
       super(props);
       this.textInput = React.createRef();
   }

   componentDidMount() {
       this.textInput.current.select();
   }

   state = {
       username: 'Default'
   };

   render() {
       return (
           <div>
               Name: <input type = 'text' value={this.state.username} ref={this.textInput} onChange={this.handleUserChange} />
           </div>
       )
   }
  
   handleUserChange = () => {
       const input = this.textInput.current;

       this.setState({
           username: input.value
       })
   }
}

Now, there's also another new ref API that comes with the 16.3 version, the Object Ref API. What it does, it brings the simplicity of strings API mixed with stability of callback ref API. Object refs should be a good fit in most of the cases Finally, another new API that was introduced is the forwardRef API, which enables to take a ref and forward it as a normal prop. This ref can be used to access a nested element.

Lifecycle Methods Deprecation

The React API evolves over time, which means a few problematic lifecycle methods that caused bugs need to be eliminated and replaced by the newer ones. Components that will soon be deprecated and prepended with UNSAFE are:

-componentWillMount

-componentWIllUpdate

-componentWIllReceiveProps

These methods has proved to be a source of confusion and bugs in the past, and they also need to be deprecated considering React's steady movement towards Async Mode.

So, what to use instead? React team offers the following migrations for the deprecated methods:

The second step can be skipped. In this case migration will have the following view: componentWillMount -> componentDidMount.

16.3 - Everything works as before

16.x - Everything works as before, but the deprecation warning will be added

17 - Still works with “UNSAFE_” prefix

New Lifecycle Methods

Now let's move to new methods that were introduced with React 16.3 release



-getDerivedStateFromProps

This method is actually static (ES6). Since it's static, you can’t reference it, so whatever is returned from the method, that would be updated. It will be called on initial mounting of the component as well when it's re-rendered. This method is considered to be a safer alternative to the legacy componentWillReceiveProps.

class myComponent extends React.Component {
   state = {
       counter: 0
   };

   static getDerivedStateFromProps(nextProps, prevState) {
       if (prevState.counter !== nextProps.counter) {
           return {
               counter: nextProps.counter
           }
       }

       // Return null to indicate no change to state.
       return null;
   }
}

-getSnapshotBeforeUpdate

This method is called right before any DOM mutations are made. It enables your component to capture current values (e.g. scroll position) before they are potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate(). Learn more about the getSnapshotBeforeUpdate() on the React's official documents.

class ScrollingList extends React.Component {
   listRef = null;

   getSnapshotBeforeUpdate(prevProps, prevState) {
       // Are we adding new items to the list?
       // Capture the current height of the list so we can adjust scroll later.
       if (prevProps.list.length < this.props.list.length) {
           return this.listRef.scrollHeight;
       }
       return null;
   }

   componentDidUpdate(prevProps, prevState, snapshot) {
       // If we have a snapshot value, we've just added new items.
       // Adjust scroll so these new items don't push the old ones out of view.
       // (snapshot here is the value returned from getSnapshotBeforeUpdate)
       if (snapshot !== null) {
           this.listRef.scrollTop +=
               this.listRef.scrollHeight - snapshot;
       }
   }

   render() {
       return (
           <div ref={this.setListRef}>
               {/* ...contents... */}
           </div>
       );
   }

   setListRef = ref => {
       this.listRef = ref;
   };

New StrictMode

StrictMode is a component that does not render any visible API, but identifies potential issues in an app by activating supplementary checks and warnings for its descendants.For example, if to wrap strict component around problems component that contains many of the deprecated methods, you will see a number of warnings in your console advising you to make some changes.  



To summarize, React's 16.3 StrictMode helps to:

-identify components with unsafe lifecycles

-throw warnings about legacy string ref API usage

-detect unexpected side effects


More features announced to be available in the upcoming releases of React.

Experimental AsyncMode

React 16 (Fiber) laid the framework for Async rendering. In 16.3 release an experimental and unstable Async mode component has become available. The idea is that you can wrap any content any content which has less priority in AsyncMode component (unstable_AsyncMode), and get better performance.

Updated React DevTools

Along with the React 16.3 release come new development tools to support debugging the new components. The new tools are available for both, Chrome and Firefox. These devtools display AsyncMode, StrictMode, and the new Context API Components.

How to migrate and how much time do I have?

To migrate, use React codemod scripts to add prefix for deprecation methods. By using polyfill from “react-lifecycle-compat” you will add backwards compatibility to new methods.

In terms of timing, deprecation warnings will be enabled with a future 16.x releases, but the legacy lifecycles will continue to work until version 17. Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an automated script to rename them in existing code.

SHARE WITH FRIENDS
You might find this interesting
Our cases
Bosch Classic Cars - Digital Engagement Platform for 19K Vintage Car Owners
Our cases
Liferay Portal Performance Tuning Services for a Major Online Gaming Software Supplier
Web
Three Authentication Approaches to Keep Your Clients Safe
Our cases
How to apply React Native while developing heavy cross-platform mobile apps
Mobile
Reasons to believe in Ionic hybrid app
Web
SEO Tips & Tricks for Single Page Web Applications
E-book
How to Secure Web Product Development — FREE eBook
E-book
Digital Transformation: the Philosopher’s Stone of Economic Growth
Web,Outsourcing,Other
Angular 5 VS React.js – Who’s Going to Set the Tone in the Upcoming Year?
Web
Agile and DevOps are Key Drivers of Digital Transformation
Web
K&C insights: how to make your workflow work for you
Web,Other
GoLang: Features, Pros and Cons
Our cases
Reference: Major producer of auto electronics and spare parts
Outsourcing,Other
Hybrid, SaaS+PaaS, IoT: Cloud Trends to Catch in 2018
Web,Outsourcing,Other
Angular vs. React vs. Vue – Let the Fight Start!
DevOps
DevOps with Puppet: Tips on Setting it up for Configuring Servers
Web,Outsourcing,Other
JS Frameworks: The Trendiest Frameworks You Should Know
Our cases
Micro-service Architecture for New AngularJS Application - Case Study
Mobile
Native or Hybrid Apps: A Quick Comparison
DevOps
Installation and setting up: Nextcloud as a local network storage on CentOS7
Web
Centralized Logging with Logstash, Elasticsearch & Kibana
Web
A Guidance for Keeping Your Web Development Project Within the Budget: Three Key Pillars
Web
Plan to Succeed: 4 Tips for Building Scalable Software
Web
Microservices… when do we need them?
Web
Debunking imaginary shortcomings of cross-platform frameworks
Our cases
Portal Performance Tuning For Major German Travel Agency
Web
Technologies that Foster Digital Transformation
Web,Other
How to Make Your Web Solution Rock: 7 Areas to Check
Web
4 Time-Saving Ways to Test Your Cross Platform Mobile App
Web,Outsourcing,Other
Angular 5.0.0 – A Better Version of Itself
E-book
Top Tools for Cost-Effective Web Development — eBook
Web
A secret formula of an agile dream team
Web
Cloud Deployment: Overview of Options
Web
How to Motivate Your Dedicated Team to Work with Legacy Projects
Web,Our cases
White Label: A Customized Software Solution from a Business and Tech Perspective
Web
Cost efficient technologies
Web
Scaling software solutions - how it works
DevOps,Outsourcing,Other
How to setup Kubernetes cluster on AWS
DevOps
Docker: Virtualize Your Development Environment Right
Web
When Microservices Help Make Future-Ready Products
Outsourcing,Other
How to Ramp up Your Team Wisely
Outsourcing,Testing
How the QA Team Tests Your Project
DevOps
How We Manage Our Infrastructure with Chef
Our cases
Reformation of Deployment Cycle for Bosch Classic Cars Portal
Our cases
Fast and Lightweight Mobile Application based on PhoneGap/ Cordova
Our cases
Drivelog.de — Web Marketplace for Car Owners and Service Providers
DevOps
Use case: how to build and run Docker containers with NVIDIA GPUs
DevOps
How We Use Ansіble for Configuration of Our Environments
Web
Angular 2.0 vs Angular 1.4. What fits you best?
Other
Big Data: Why Your Business Needs it ASAP
Web,Outsourcing,Other
How a Company Can Benefit from White Label: K&C experience
DevOps
How to Build a Rancher & Docker Based Cloud
DevOps
Setting Up: Traefik Balancer In Rancher Cloud
E-book
Determining Approaches to Mobile App Development
Web,Other
Dedicated Teams for Web Development: Choice Criteria to be Checked
Web
Angular 4 vs React – what to choose in 2017
Outsourcing
The BPM in the Microservice Environment
DevOps,Outsourcing,Other
ROCKET.CHAT as an internal messaging system and helpdesk platform
Web
Monolith, Microservices, Serverless... Are We in the Middle of the Way?
Web
JQuery vs. Angular: Ad Astra per Aspera
DevOps
How to start services on Linux
Web
Advanced Technologies for Marketing Automation
Web,Outsourcing
Node.js vs. Angular.js – Two Sides of the Same Coin
DevOps,Outsourcing
AWS DevOps: A New Way to Run Business
Web,Outsourcing
Why It’s Better to Use Vue.js than Angular and React in 2018
Web,Outsourcing
Migration from Angular 1 to Angular 5
DevOps,Outsourcing
Information Security with AWS DevOps
Other
Europe’s Big Payments Directive PSD2
Our cases
The Platform Providing Event Organization
Web,Outsourcing,Other
Golang vs. Node.js
Our cases
VAIX - Fault tolerant infrastructure for 24/7 high-load machine learning service
Web,DevOps,Our cases
Our case: Marketplace for gaming goods
Web,Outsourcing
Angular 6 Will Be A Hit
Web,Outsourcing
Web App Security 101: Keep Calm and Do Threat Modeling
Web,Mobile,Outsourcing,Other
All You Wanted to Know About Chatbot Platforms
Web,Outsourcing
ANGULAR 6 versus REACT 16.3
Other
GDPR: Smart Practices
Web
Fintech Apps - A Lucrative Solution for Customers and Businesses Alike
Other
Swimming with Sharks
Web
Node.js 10.0.0: Everyone’s Favorite Got Even Better
DevOps,Outsourcing
Rancher 2.0: A Quick Look at the New Version
Our cases
How to Save Money Using Your Own Infrastructure
Other
I’m Tired of Blockchain Hype, Are You?
Web,Mobile
The Web Apps that will Eat Mobile
Other
Don’t Treat Me Like a Fool: The worst thing you can do for your business
Web
Web App Security 101: How to Defend Against a Brute Force Attack
Other
How to Convert Your Business to an Amazon-Style Market Leader
Web,Outsourcing,Other
JavaScript & WebSockets: How to Build Real-Time Applications
Other
Culture eats technology for breakfast
Other
How to Control Agile Development: Progress and Costs
Marketing
Аudience-based Marketing
Other,Marketing
How to Become a Leader in Your Market
Web,Other
SSR or CSR for Progressive Web App
Web,Outsourcing
Angular 6 vs. Ember 3