React useState

Goal

Use useState for simple local state that should trigger re-render. Avoid redundant state and direct mutation.

Rules

• Call hooks at top level only.
• Keep state local when possible.
• Store only values that cannot be derived during render.
• Create new objects and arrays when updating.
• Use updater functions when next state depends on previous state.
• Use initializer functions for expensive initial values.
• Do not read state immediately after setting and expect the new value.
• Do not call setState unconditionally during render.

Use When