react-use-state_skill

Overview

This skill guides correct and efficient use of React's useState hook. It explains when useState is the right choice, when to prefer alternatives, and common pitfalls that cause stale updates or ignored changes. Followable rules and patterns help keep state predictable and performant.

How this skill works

The skill inspects component state scenarios and recommends the appropriate approach: useState for simple local state, useReducer for complex transitions, useRef for mutable values that shouldn't trigger renders, and useMemo for expensive derived values. It highlights critical rules like immutability, updater functions for sequential changes, initializer functions for costly defaults, and the top-level hooks rule.

When to use it

• Local component values that trigger re-renders (form inputs, toggles, counters).
• Simple state transitions where you replace a value directly.
• When you need to persist a value across renders without external storage.
• Not for global/shared state or values derivable from props/state.

Best practices

• Never mutate state directly; always return new objects/arrays (spread, map, filter).
• Use the functional updater (setState(prev => next)) when new state depends on previous state.
• Provide an initializer function to avoid expensive work on every render (useState(() => init())).
• Call hooks only at the top level of components; never inside conditionals or loops.
• Compute derived values during render or with useMemo instead of storing redundant state.

Example use cases

• Form input values: const [name, setName] = useState('') and update onChange.
• UI toggles and modals: const [isOpen, setIsOpen] = useState(false).
• Local lists: setItems(items => [...items, newItem]) for adding without mutating.
• Sequential counters: setCount(c => c + 1) called multiple times to accumulate updates.
• Expensive default state: const [todos, setTodos] = useState(() => createTodos()).