DEV Community

Using the useReducer Hook in React with TypeScript

Craig Holliday on May 19, 2021

The useReducer hook is an alternative to the useState hook and is preferable when you have complex state logic or when your next state depends on y...

Read full post

ratrateroo • Mar 10 '22

Nice article, helps me to understand useReducer with TypeScript.

lines with:
value: state.count + payload
value: state.count - payload

should be changed to:
count: state.count + payload
count: state.count - payload

and a few edit in + and - buttons.

Alex Lohr • May 19 '21

I believe useReducer is meant for cases where the transitions between the states (actions) are required to understand the underlying logic. In any other case, better use useState.

sam • May 20 '21

there's nothing useReducer can do that useState can't, and vice versa. the choice is just about clarity.

Alex Lohr • May 20 '21

Exactly. And the choice should depend on whether the transitions are more meaningful to explain the task than the state itself.

Menard Maranan • Jul 4 '23 • Edited

On your second use case, useReducer using the Partial type for state updates, I think good 'ol useState is just enough.

interface LoadingState {
    loaded: boolean;
    loading: boolean;
    error: Error | null;
}

function LoadingComponent() {
    const [state, setState] = useState<LoadingState>({
        loaded: false,
        loading: true,
        error: null
    })

    useEffect(() => {
        ...
        setState(prev => ({
            ...prev,
            loaded: true,
            loading: true
        }))
        ...
    }, [])

    return (
        <div>
            ...
        </div>
    )
}

Alex Vallejo • Apr 6 '23

This is an over simplistic example. What if the payload can span multiple types but depend on the action being called?

David Cameron • Apr 25 '23

I appreciated this article, so tyvm! I do think you should implement the changes that @ratrateroo has called out though or at least reply with an explanation of why they're not valid.