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:

Secure your AI-generated projects with these security practices

Secure AI-generated code with proactive prompting, automated guardrails, and contextual auditing. A practical playbook for safe AI-assisted development.

Ikeh Akinyemi
Sep 16, 2025 ⋅ 5 min read

Let’s kill vibe coding and bring back prompt engineering

Explore the vibe coding hype cycle, the risks of casual “vibe-driven” development, and why prompt engineering deserves a comeback as a critical skill for building better, more reliable AI applications.

Oscar Jite-Orimiono
Sep 16, 2025 ⋅ 11 min read
Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 ⋅ 4 min read

Can native web APIs replace custom components in 2025?

Learn how native web APIs such as dialog, details, and Popover bring accessibility, performance, and simplicity without custom components.

Daniel Schwarz
Sep 12, 2025 ⋅ 9 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