2. State using useState hook #

Created Saturday 24 January 2022

Why #

This is an implementation of state, so that components are redrawn when state is mutated explicitly. Note that state remains detached from the component lifecycle.

How #

A life-cycle method (informally called a hook) is used. It is added to the component’s code.

A variable is captured as state and managed by the hook. When an update call using the hook is made, the component is re-rendered. So UI is synced with the state.

What #

Here’s the syntax:

Import useState from react.
Capture a variable using useState, and also get back an updater function. Add this code in the component.
Update the state using the updater method. Example

import React, { useState } from 'react';

function MyComponent (props) {
	const [title, setTitle] = useState(props.title);

	// some code/event that fires setTitle
	const clickHandler = () => {
		setTitle("Updated!"); // this sets the states and fires a re-render
	}

	return (<div>
			...
			<button onClick = {clickHandler}> Click me </button>
			...
			</div>);
}

Also see project commit.

General flow of `useState` #

For the skeleton:

function MyComponent {
	const [readVar, setVariable] = useState(capture_variable);
	// some code that calls setVariable
	// component code (JSX) returned.
}

is:

In the first pass:
1. useState is initialized, state is set internally.
2. Read variable set to state.
3. Component is drawn.
In the second pass:
1. useState argument (initialization) is ignored.
2. State set to setState argument - setState is called from event/timer etc.
3. Read variable set to state.
4. Component is drawn.
Step 2 repeats. Note: const is OK for the read variable, because we never assign (=) anything to it. It’s changed internally.

Computation of initial state #