How to think about UI changes as state changes in React?

React gives us a declarative way to build user interfaces instead of manually updating the UI step by step like we do with the DOM in JavaScript. We simply declare what we want the UI to look like, and React takes care of updating it.

Declarative vs Imperative

Declarative means telling a system what the result should be. Imperative means telling it how to do something, step by step.

In vanilla JavaScript, we write imperative code — specifying exactly how and when elements should show, hide, enable, or update by manipulating the DOM manually.

In React, we do not directly manipulate the DOM. Instead, we declare what we want to see based on state.

Thinking About UI Declaratively in React

Here are the steps to think about UI declaratively:

1. Identify all visual states: List every possible UI state of the component. For example, a form can have these states: Empty (disabled button), Typing (enabled button), Submitting/Loading, Success, Error.

2. Determine what triggers state changes: Identify what causes each change — user actions (typing, clicking, submitting) or automatic events (server responses, timeouts). Visualizing with a flowchart helps.

3. Represent state in memory using useState: Decide which values should be stored as state. For a form, the states may include: form data, typing status, submitting status, success or error.

4. Remove non-essential state: Keep state simple. Unnecessary state leads to bugs. Instead of multiple booleans, use a single status like 'typing' | 'submitting' | 'success'.

5. Connect event handlers to update state: Finally, use event handlers to set the state in response to user actions.

In React, UI changes are driven by state changes. By identifying all possible states, storing them clearly, and updating UI based on state, we can build predictable and stable interfaces.

For a deeper dive, check the official docs: https://react.dev/learn/reacting-to-input-with-state