Chapter 4. Stateful Components and Events

In this chapter, we will exploit the React states and events in detail. This chapter will cover the components that have a state, the practices to communicate between them, and how to respond to users input/events in order to have the UI reflect this state. We will develop a web page where we can update the name of our liked pages from Facebook. This also covers how the state changes your React UI having enhanced performance using the virtual DOM.

This chapter will cover the following items:

• React states

• Event ecosystem

Properties versus states in ReactJS

Let's glance through the differences between props and states in React.

Properties are declared when React components are created, while states are declared within the component definitions. Thus, during the component initialization phase props are declared.

• In most of the scenarios, React components take data and pass in the form of props. In the other cases, when you are required to take user input to have a server request, states are used.

• (this.props) is used to access parameters passed from the parent component, while (this.state) is used to manage dynamic data. State should be considered private data.

Exploring the state property

In the last chapter, we explored React properties (props). Just as components can have properties, they can also have states. States are primarily set to those components where it is necessary to change, for example if the component has to be updated or replaced in future. Thus, it is not mandatory to have a state for the entire component.

Components can be both stateless and stateful:

• Stateless components are those where only props are present, but no state is defined. Thus, there will no change in these prop values for these components within the component life cycle. The only source of static data should be presented to the component instance via the props. Thus, props are immutable data for a React component.

• Stateful components: Stateless components, are meant to represent any React component declared as a function that has no state and returns the same markup given the same props. As the name implies, stateful components are those where both props and states...

Events

React uses SyntheticEvent, which is a cross-browser wrapper around the browser's native event. So all the event handlers in the react applications will be passed instances of SyntheticEvent. React's event ecosystem has the same interface as any of the browser's native events with the advantage that it works identically in all the browsers and provides stopPropagation() and preventDefault() too.

If React is installed as an NPM module, then these SyntheticEvent-related files can be found in the following location within your app: app/node_modules/react/lib.

All these events comply with the W3C standard. The main event flow happens as:

• Dispatching the event : @param {object} dispatchConfig

• Marker identifying the event target: @param {object} dispatchMarker

• Native event: @param {object} nativeEvent

The way React uses this event delegation is by listening to the nodes that have listeners. Depending on the event handlers on the particular node, the synthetic event system of React implements its...

Summary

According to Facebook's Reconciliation documentation (https://facebook.github.io/react/docs/reconciliation.html)

"React's key design decision is to make the API seem like it re-renders the whole app on every update."

Thus, whenever the setState() method is called on an object, that particular node is marked. At the end of the event loop, all the nodes are re-rendered where the setState() method is called.

React is fast because it never talks to the DOM directly. It maintains an in-memory representation of the actual DOM. Whenever the render() method is called, it returns a mapping of the actual DOM. React can detect (using a diff algorithm) changes in the mapped DOM compared to the in-memory representation. It then re-renders the changes and updates the UI likewise.

The event ecosystem in React is implemented by a full synthetic event system (SyntheticEvent()). Cross-browser efficiency is achieved as all the events bubble up consistently.

In the current chapter, we have explored the stateful...