Local Component State
Local state should be the default choice when state belongs to one interactive component. Examples include open/closed dropdowns, form input state, tab selection, and temporary UI state.
Do not move every piece of state into Redux or another global store. Global state introduces synchronization and architectural complexity.
Local State
'use client';
import { useState } from 'react';
export default function Accordion() {
const [open, setOpen] = useState(false);
return (
<button onClick={() => setOpen(value => !value)}>
{open ? 'Close' : 'Open'}
</button>
);
}💡 The open state belongs only to this interactive component, so local state is appropriate.
Key Takeaways
- Keep local state local.
- Do not introduce global state without a cross-component requirement.
- Functional state updates are useful when the next value depends on the previous value.