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 to win clients with a Flutter web demo that feels real

How to win clients with a Flutter web demo that feels real

Use Flutter to build browser-based app demos that help clients visualize the product, speed up buy-in, and close deals faster.

Lewis Cianci
Mar 21, 2025 ⋅ 5 min read
TypeScript Is Getting A 10x Faster Compiler —Here’s What It Means For Developers

TypeScript is getting a 10x faster compiler — here’s what it means for developers

TypeScript’s new Go-based compiler offers 10x faster builds, improved CI/CD performance, quicker editor startup, and enhanced hot reload times.

Kapeel Kokane
Mar 21, 2025 ⋅ 6 min read

How to manage JavaScript closures in React

Learn how to manage JavaScript closures in React and explore real-life examples of proper JavaScript closure management.

Andrew Evans
Mar 21, 2025 ⋅ 10 min read
how to use css variables

How to use CSS variables like a pro

By building these four simple projects, you’ll learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

Idorenyin Obong
Mar 20, 2025 ⋅ 18 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