React v16.4.0: Pointer Events

Developers looking to create amazing user interfaces with different user components prefer React, which is one of the top-rated, free, and open-source front-end Javascript library. The virtual DOM is the primary concept of React. It is maintained by a group of companies/ individuals, which helps keep it updated according to the current project needs. Hence, many businesses prefer to hire React experts based on its expertise and skills. React has launched React v16.4.0, which is a minor version released in 2018. Let us know all about the pointer events in this version.

What is React v16.4.0?

It came as a new version and was released on 23rd May 2018 and came as a popular event for developers. It has fixed different types of bugs in the previous version. One of the notable features of React v16.4.0 is that it supports pointer events. It was one of the requested features in all versions of React. Let us know all about these pointer events and some basic details of the React v16.4.0.

How to install React v16.4.0?

It is easy for the developers to install React v16.4.0 as it is available on the npm registry. The quick steps to install this version are:

• Run the command “yarn add react@^16.4.0 react-dom@^16.4.0”
• For installing React 16 version with npm run “npm install –save react@^16.4.0 react-dom@^16.4.0”
• The UMB build for React version installation is” and ”

What is React Changelog?

Let us go through the key React changelogs.

1. React

• Start by adding a new component, “experimental React.unstable_Profiler,” for measuring performance.

2. React DOM

• The first step is to add support for the Pointer Events specification. It is important to properly call “getDerivedStateFromProps()” irrespective of the reason for re-rendering.
• The next step is to fix a bug that was preventing context propagation in some cases.
• The re-rendering of the components is fixed using “forwardRef()” on a deeper “setState().”
• It is important to fix the attributes which are incorrectly getting removed from the specific element nodes.
• In the events of the legacy context provider above, the context providers are fixed not to bail out on children.
• If you’re using “react-lifecycles-compat in ,” a false positive warning is fixed.
• The “forwardRef()” is warned when the render function has “propTypes or defaultProps. “
• It is important to improve how “forwardRef()” and other context consumers are displayed in the component stack.
• Last but not least is to change internal event names. It easily breaks the third-party packages relying on the React internals in different but unsupported ways.

3. React Test Renderer

• The “getDerivedStateFromProps()” is fixed to support and match the new React DOM behavior.
• The “testInstance.parent” crash is fixed when the parent is a fragment or another special node.
• It is easy to discover the “forwardRef()” components using the test renderer traversal methods.
• All the Shallow renderer now ignores “setState()” updaters are now ignored by Shallow renderer which is returned undefined or null.

4. React ART

• The reading context is fixed and is provided from the React DOM’s managed tree.

5. React Call Return

• It is not included currently as it was affecting the total bundle size.
• Further, the API wasn’t good enough.

6. React Reconciler (Experimental)

• The “new host config shape” doesn’t use different nested objects and is flat.

7. React.unstable_Profiler

• It is one of the experimental components added in React v16.4.0. It is added to fix the possible bugs and to measure the application performance.

Also Read: How to make React development faster?

Pointer events

Pointer events are hardware-agonistic and can handle different input devices like touch, stylus, mouse, etc. Pointer events have removed the requirement for different implementations for different devices. Further, the cross-device pointers are easier to authorize using pointer events. These are similar to the mouse events like mouse up, mouse down, etc.
Coming down to the API, the pointer events work like the other event handlers. It is easy to add pointer events as attributes to React components lifecycle. These are passed as a callback that accepts the event. The events are processed inside the callback.

What is Pointer events in React v16.4.0?

The key pointer events added to React DOM include:
1. onPointerOut: When the pointer leaves an element or one of its descendants, this event is initiated.
2. onPointerOver: When the pointer passes over an element or one of its descendants, this event is initiated.
3. onPointerLeave: When the pointer leaves an element, this event is initiated.
4. onPointerEnter: When the cursor passes over an element, this event is initiated.
5. onLostPointerCapture: When the pointer is no longer in capture mode for an element, this event is generated.
6. onPointerDown: When the user starts to press and hold down the pointing device, this event is started.
7. onGotPointerCapture: When the pointer is set to capture mode for an element, this event is launched.
8. onPointerCancel: When the user aborts the pointer operation, this event is set off.
9. onPointerMove: When the user moves the pointing device, this event is started.
10. onPointerUp: When the user lets go of the pointing device, this event is initiated.

Example

	
import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
  
  render() {
  
    return (
      <div>
      <Child name = "Mahesh"></Child>
      </div>
    )
  }
}
  
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        name: "Ramesh"
        };
    }
    static getDerivedStateFromProps(props, state) {
        if(props.name !== state.name){
            return{
                name: props.name
            };
        }
        return null; // No change to state
    }
    render(){
       return (
        <div> My name is {this.state.name }</div>
       )
    }
}
                      
export default App;

What is GetDerivedStateFromProps?

The GetDerivedStateFromProps will return null, which denotes no change in state, if props change and the state follows suit. Props in the aforementioned example have a property named name, but the state has a different value for that property. Consequently, the state will alter in line with the property’s value.

Output

What is Bug fix for “getDerivedStateFromProps”?

The “getDerivedStateFromProps” is called when the component is rendered irrespective of the update’s cause. This brought an oversight in the previous update where the component was re-rendered by its parent and couldn’t get fired due to the local “setState” result. Hence, the improved behavior ensures that it is compatible with React’s upcoming asynchronous rendering modes in the future. This bug may cause minor issues with certain components but gets fixed with the majority of the applications. The two main cases when this bug causes issues are:

Comparison of Props: Here, the incoming Props are compared to the previous Props during controlled value computation. While using “getDerivedStateFromProps” or the legacy “componentWillReceiveProps” the code which mirrors props in the state contains bugs. Let us consider the case where “getDerivedStateFromProps” is fired on prop changes.

Image source : reactjs.org

This is fixed by comparing the incoming Prop value to the previous Prop values stored in the previous Prop states. The code for the same is:

Image source : reactjs.org

What is Avoiding side effects in“getDerivedStateFromProps”?

The “getDerivedStateFromProps” should be a pure function of the Props and states. It is easy for the previous undiscovered bugs to get discovered due to the consistent firing of the “getDerivedStateFromProps.” Likewise, any side effects were not supported in “getDerivedStateFromProps.” It can be resolved by solving the side-effected code with other methods. For example, the manual DOM mutations are inside the “componentDidMount or componentDidUpdate” while the Flux dispatches are located inside the originating event handler.

Which are points to remember while using Pointer events in React v16.4.0?

• React v16.4.0 has introduced ten pointer events.
• Pointer events are not supported by Safari.
• The MDN Pointer events documentation offers a quick reference for the in-depth explanation for every event.
• These pointer events work in the browsers supporting “Pointer Events” specifications like Internet Explorer, Edge, Firefox, Chrome, etc.
• It is recommended to use third-party pointer events polyfill.

Wrapping Up

Hence, it is easy to know all about React v16.4.0 and its pointer events. Starting from the quick definition, it is easy to understand the different pointer events, and other React functionalities. Not to miss are the quick points to remember on React v16.4.0 as a handy guide for pointer events.

If you want to create your next React-based project for your business then hire the best mobile app development company like Bosc Tech Labs who is ready and happy to help you!

Frequently Asked Questions (FAQs)

1. What is the default pointer event?

Default pointer events on an element correspond to CSS pointer-events property. It will control whether or not an element will “pass through” clicks to the elements underneath. For example, canvas images can sit over the button element.

2. How will pointer events work?

Pointer events are DOM events that are fired for pointing the device. They are designed to make a single DOM event model for handling the pointing input devices like the mouse, pen or touch. Hence, the pointer is the hardware-agnostic device targeting the specific screen coordinates set.

3. Do pointers take the least memory?

A pointer is saved in the bytes as it is needed to hold an address on the computer. It often makes the pointer much smaller than the things they point to by taking the benefit of this small size while storing the data and passing the parameters to functions.

4. What is lazy loading in React development?

Lazy loading is one of the most common design patterns used in web and mobile app development. It is used along with frameworks Angular and React to increase an app’s performance by reducing an initial loading time. Therefore, lazy loading was integrated using third-party libraries.

Book your appointment now