The useState Hook
Components often need to change what is on the screen as a result of an interaction. Typing into a form should update the input field, clicking a button should open a menu.
The useReducer Hook
While useState is excellent for managing independent variables, it becomes difficult to maintain when a single component has multiple state variables that rely on complex conditional logic.
The Context API
Usually, you pass information from a parent component to a child component via props. However, passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the exact same information.