Local state is state used by one Client Component or a small part of the component tree. [React](/courses/reactjs)'s `useState` and `useReducer` [hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) are usually enough for this type of state. ### useState Example ```tsx 'use client'; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return (

Count: {count}

); } ``` ### Why Is This a Client Component? Interactive [React](/courses/reactjs) state requires browser-side React behavior. Therefore a component using: ```text useState useReducer ``` must be inside a Client Component boundary. ### When Should You Use useState? `useState` is excellent for simple values such as: ```text boolean string number selected item small object ``` Example: ```tsx const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); ``` ### When Is useReducer Useful? If several related state changes form a more complex workflow, `useReducer` can make those transitions clearer. Example: ```tsx 'use client'; import { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'increment': return { ...state, count: state.count + 1 }; case 'reset': return { ...state, count: 0 }; default: return state; } } export default function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( <>

{state.count}

); } ``` ### Do Not Reach for Global State Too Early This state: ```javascript const [menuOpen, setMenuOpen] = useState(false); ``` usually does not need [Redux](/reactjs/chapter-22-redux-toolkit) or Zustand simply because the application already uses those libraries elsewhere. ### Lift State When Siblings Need It If two nearby components need the same value, move the state to their closest shared parent and pass values/[functions](/javascript/functions-in-javascript) as props. Only introduce broader state-management tools when prop sharing becomes genuinely difficult or the state is required across distant areas. ### Interview-Ready Answer Use `useState` for simple local interactive state and `useReducer` when one component has several related state transitions. Both require a Client Component. Keep state local whenever practical and lift it to the nearest shared parent before introducing global state libraries.