What is useReducer in TypeScript?

Can you explain what useReducer is in TypeScript?

Sure! useReducer is a React hook that helps manage complex state logic in functional components. It works similarly to useState but is more suitable for managing state that depends on previous state.

How does it differ from useState?

While useState is great for simple state management, useReducer is better for handling more complex state transitions, especially when the next state depends on the previous one.

Can you show me a simple example of useReducer in TypeScript?

Absolutely! Here's a basic example:

import React, { useReducer } from 'react';

type State = { count: number };
type Action = { type: 'increment' | 'decrement' };

const initialState: State = { count: 0 };

function reducer(state: State, action: Action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const Counter: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

This example shows a simple counter using useReducer.

What are the benefits of using useReducer?

The benefits include better organization of state logic, easier testing, and improved performance for complex state updates.