rerender-functional-setstate

What problem does it solve?

React components often update state based on the current value, which can lead to stale closures and unnecessary callback recreations. This Skill advocates using the functional update form of setState to keep logic correct and performant.

Core Features & Use Cases

• Stable callbacks: use the functional update form to ensure updates always operate on the latest state.
• Prevents stale closures: avoids referencing stale state in event handlers, effects, and async logic.
• Performance benefits: reduces unnecessary re-creations of functions and re-renders by avoiding direct state capture.
• Use Case: In a Todo list, addItem and removeItem should rely on curr => ... to operate on the freshest items array.

Quick Start

Use the functional update form when updating state that depends on the previous value. For example, replace setItems(items => [...items, newItem]) with setItems(curr => [...curr, newItem]).