2024-10-10
3896
#react
Ejiro Asiuwhu
35635
Oct 10, 2024 ⋅ 13 min read

A guide to the React useReducer Hook

Ejiro Asiuwhu Software engineer with a drive for building highly scalable and performant web applications. Heavily interested in module federation, micro frontends, state machines, TDD, and system designs. Big on web performance and optimization, advanced component design patterns, a11y, SSR, SSG, ISR, and state management. Expert at crafting highly reusable TypeScript-heavy component libraries.

Recent posts:

​​How HTML’s Selectedcontent Element Improves Dropdowns

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

Temitope Oyedele
Jun 27, 2025 ⋅ 6 min read
advanced caching in Node.js with Valkey

How to get faster data access in Node.js with Valkey

Learn how to implement an advanced caching layer in a Node.js app using Valkey, a high-performance, Redis-compatible in-memory datastore.

Muhammed Ali
Jun 27, 2025 ⋅ 7 min read
how to properly handle rejected promises in TypeScript

How to properly handle rejected promises in TypeScript

Learn how to properly handle rejected promises in TypeScript using Angular, with tips for retry logic, typed results, and avoiding unhandled exceptions.

Lewis Cianci
Jun 26, 2025 ⋅ 4 min read
Your AI Has Agency — Here’s How To Architect Its Frontend

Your AI has agency — here’s how to architect its frontend

AI’s not just following orders anymore. If you’re building the frontend, here’s how to design interfaces that actually understand your agent’s smarts.

Rosario De Chiara
Jun 25, 2025 ⋅ 5 min read
View all posts

9 Replies to "A guide to the React useReducer Hook"

  1. Really good explanation, thanks! Just starting to learn react and on top of a lot of new stuff to learn there is more new stuff to learn with the introduction to the Hooks.

    I am currently stuck. I am using useReducer because I have form with multiple inputs. I capture the inputs and call an API. I am getting the results back.

    The part I am stuck on is how to get that data into a table of sorts. But before I can do that I need to update the state with the data I get back (I think). I am having a hard time finding how to do that. Most examples just have everything on one page: the reducer, the axios call, the update to one field because they are using useState, and just display the results in a console log. That’s great but who does that? #1) Just call a get API on page load and #2) Just plop the data into the console log. While informative and helps with some understanding, it is this last piece of the puzzle that I am stuck on. I am a little frustrated at the moment. If you know of a site that shows this last piece of the puzzle of if you have an example somewhere please let me know. Thanks for your time and sharing this info for newbs!

  2. I had to alter the code for the code to work: while the await login function is declared, it is not called as a method. So refactoring to extract the | function login… | (which now you can make available to both the state and reducer examples):

    const handleOnSubmit = async (e) => {
    e.preventDefault();
    setError(”);
    showLoader(true);

    function login(u, p) {
    return new Promise((resolve, reject) => {
    console.log(‘fuc’);
    setTimeout(() => {
    if (u === ‘username’ && p === ‘password’) {
    resolve();
    } else {
    reject();
    }
    }, 1000);
    });
    }

    try {
    await login(username, password)
    setIsLoggedIn(true);
    } catch (error) {
    setError(‘Incorrect username or password!’);
    showLoader(false);
    setUsername(”);
    setPassword(”);
    }
    }

  3. I’ve got a useReducer that receives a payload, calls a function that returns the actual “payload” that updates teh context. Should those functions be part of the reducer itself, or global? wrapped in useCallback?

Leave a Reply