Lifecycle

There are 3 phases in a React component lifecycle - mounting, updating, and unmounting. In each phase there are specific lifecycle methods available which are a series of events that happen throughout the mounting, updating, and unmounting of a React component.

I’ll list the available methods of each phase below.

1. Mounting - adding nodes to the DOM
2. Updating - altering existing nodes in the DOM
3. Unmounting - removing nodes from the DOM
4. Error handling - verifying that the code works and is bug free

In the first phase is inserted into the DOM, which then moves into the updating phase. Without the updating phase it would remain as it is initially created in the DOM without taking in any specific state or props. Keep in mind that any components that may help to shape the state and attribute props to one component require the same lifecycle flow. The final phase of unmounting removes a component from the DOM. There is one additional phase that a component may go through which is the error handling phase which results in your code not running due to a bug in your code.

Components may not go through every phase. It’s possible for a component to be mounted and unmounted without anything being updated and if there are no errors that phases would also be skipped.

The available lifecycle methods for each phase of a component and are typically called in the order below.

Mounting

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Updating

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting

• componentWillUnmount()

Error handling

• static getDerivedStateFromError()
• componentDidCatch()

For additional information about the above methods please refer to https://reactjs.org/docs/react-component.html.

Props

Props are arguments passed into React components similar to how we pass HTML attributes. The data flow in React is unidirectional meaning from parent components to child components.

	class ParentComponent extends Component {
		render() {
			return <ChildComponent name='First Child' />;
		}
	}

	const ChildComponent = (props) => {
		return <p>{props.name}</p>;
	};

The above code demonstrates a defined prop of name with a text data value of "First Child" which we are able to use the the child component via the (props) argument. To render the prop we utilize dot notation along with the prop i.e. {props.name}. When the component loads it will display the prop as it was passed.

State

A built in object, State allows components to create and manage their own data. Unlike Props, components cannot pass data with state, but they can create and manage it internally. State is similar to props but it is private and fully controlled by the component.

class Test extends React.Component {
	constructor() {
		this.state = {
			id: 1,

			name: 'test',
		};
	}

	render() {
		return (
			<div>
				<p>{this.state.id}</p>

				<p>{this.state.name}</p>
			</div>
		);
	}
}

State should not be modified directly, but it can be modified with a special method called setState().

A change in state occurs with user-input, triggering an event, etc. React components with state are rendered based on the data in state. State holds the initial information.

When state changes React is informed immediately rerendering the DOM, not the whole DOM, but only the component that is being updated. This is done with the setState() method previously mentioned.

Two key points regarding state:

• State shouldn’t be modified directly - the setState() should be used.
• State affects the performance of the application and shouldn’t be used unnecessarily.

Main differences between props and state

• Components receive data from outside with props and can create and manage their own data with state.
• Props are used to pass data, state is for managing data
• Data from props is read-only and cannot be modified by a component that is receiving it from a parent component.