State

A stateful component is independent of its content and has the ability to update itself based on internal triggers.

In general, any state used in a web application belongs to one of three categories: 1. Application data, 2. UI state, 3. Form data.

Call useState in the functional component and supply an initial value. Destructure the response from calling useState as two array elements o The first element is the current value o The second element is a setter function.

const [o, setter] = useState(initialValue)

When you want to update the state, simply call the setter with either a function or a plain value.

setter((originValue) -> updateoValue)

As useState is a kind of hook, if you use it in a component, the useState must be invoked every time the component render. And if multiple useState, they must be invoked in the same order every time.

The state of component can be shared with other component via, e.g. property.